浮动2 div背后的css浮动规则是什么？
浮动2 div背后的css浮动规则是什么？
提问于 2014-01-25 19:30:01
在我看来，当浮动两个div而不是一个div时，我们得到了完全不同的行为。在本例中，http://jsfiddle.net/nwZC3/2/左边栏浮动在主div中。
<div class="left-sidebar" style="float:left; width:10%;"></div>
<div class="main" style="width:70%;"></div>但是在这个http://jsfiddle.net/m77na/9/中，主div没有浮动在右边栏中，不同的是我们在布局中也有另一个浮动div。
<div class="left-sidebar" style="float:left;width:10%;"></div>
<div class="main" style="width:70%;float:left"></div>
<div class="right-sidebar" style="width:20%;"></div>我试图在规范(w3c可视化格式化模型)中找到一个浮动规则来解释这种行为，但我没有找到任何浮动规则。
回答 1
Stack Overflow用户
发布于 2014-01-25 20:25:37
当您仅浮动.left-sidebar时，发生的情况是它仅相对于.main的内容浮动。
当您浮动这两个元素时，发生的是.left-sidebar对.main本身进行浮动。结果是两个盒子并排堆叠在一起。.main元素定位在.left-sidebar的浮点型之后，因为它们都是浮点型的。.main中的内容不受.left-sidebar浮点的影响。
规范的Section 9.5.1对float属性及其值有非常简洁的描述。具体来说，
离开
该元素生成一个向左浮动的块框。内容在框的右侧流动，从顶部开始(受制于“clear”属性)。
它还详细说明了浮动应该如何与其他内容和其他浮动进行交互。
下面是控制浮点数行为的精确规则：
- ...
- If当前框是左浮动的，并且存在由源文档中较早的元素生成的任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须位于前一个框的右外边缘的右侧，或者其顶部必须低于前一个框的底部。类似的规则也适用于右浮动boxes.
- ...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21349948
复制相关文章
相似问题
腾讯云开发者
