gpt4 book ai didi

css - 与 float 行为混淆

转载 作者:太空宇宙 更新时间:2023-11-04 13:47:12 25 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<title>float</title>
<style>
.container {
margin:0 auto;
width:310px;
height:500px;
border:1px solid blue
}

.f {
float:left;border: 1px solid red;width:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="f" style="height:100px">
A
</div>
<div class="f" style="height:150px">
B
</div>
<div class="f" style="height:200px">
C
</div>
<div class="f" style="height:50px">
D
</div>
</div>
</body>
</html>

1.用浏览器打开上面的html,它看起来像这样 enter image description here

2.将C的高度降低到120px

现在看起来像这样 enter image description here

根据规范:

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

D 的顶部必须低于前面盒子(A,B,C)的底部但是现在 D 的顶部比 B 高。为什么?

最佳答案

它说两者中的任何一个都是真的。

either the left outer edge of the current box must be to the right of the right outer edge of the earlier box,

or its top must be lower than the bottom of the earlier box.

对于 D,条件 1 对于 B 为真,条件 2 对于 C 为真

关于css - 与 float 行为混淆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22446935/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com