浮动2(或更多)div是如何工作的？
浮动2(或更多)div是如何工作的？
提问于 2016-05-12 05:55:17
当我将#p1设置为float:left时，当我将两个div设置为float:left时，只有#p2的内容环绕在浮动的#p1上，而不是div#p2.The div#p2似乎只存在于浏览器的左侧边缘(如Chrome工具中所见).However，而容器也环绕在每个other.Why周围，是这样吗？
#p1 {
background-color: blue;
border: 1px solid black;
float: left;
width: 100px;
}
#p2 {
background-color: red;
border: 1px solid black;
width: 100px;
float: left;
}<title>Floating Divs</title>
<h1>Floating Divs</h1>
<div>
<div id="p1">DIV</div>
<div id="p2">DIVDIVDIV</div>
</div>
#p1 {
background-color: blue;
border: 1px solid black;
float: left;
width: 100px;
}
#p2 {
background-color: red;
border: 1px solid black;
width: 100px;
}<title>Floating Divs</title>
<h1>Floating Divs</h1>
<div>
<div id="p1">DIV</div>
<div id="p2">DIVDIVDIV</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-12 07:05:15
CSS2.1规范中描述的浮标的精确规则在第2点中说：
如果当前框是左浮动的，并且源文档中前面的元素生成了任何左浮动框，那么对于每个这样的较早的框，当前框的左外缘必须位于前面框的右外缘的右侧，或者其顶部必须低于前面框的底部。类似的规则适用于右浮动框.
因此，当#p2被浮动时，它将避免#p1。当它不被浮动时，它将忽略#p1的存在。但是，#p2中包含的行框避免了浮动的#p1，导致#p2的高度增长到足以容纳该行框。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37178359
复制相关文章
相似问题
腾讯云开发者
