我试图更深入地了解 CSS，我注意到当div漂浮在其下方的其他元素。对于环绕它的文本来说，情况并非如此。怎么会 ？
这是设计使然，因为这就是浮动的工作原理。如果您参考文档:
float CSS 属性将元素放置在其容器的左侧或右侧，允许文本和环绕它的内联元素。该元素是从正常流程中移除页面的一部分，尽管仍然是流程的一部分。
您应该注意浮动元素的 2 个功能：
- 从正常流中删除：这意味着其他元素可以与浮动元素重叠或被浮动元素重叠（例如
position:absolute)
- 文本和内联元素将环绕：只有文本和内联级别元素不会与浮动元素重叠，而是环绕它。
以下是一些可以更好理解的基本示例：
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}
<div class="float"></div>
<div class="blue"></div>
蓝色 div 与浮动元素重叠，因为它是块级元素。
如果我们将其设为内联级别元素（inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}
<div class="float"></div>
<div class="blue"></div>
当我们添加文本时，您会注意到文本将如何环绕浮动元素并保留在其包含块（蓝色 div）内。
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}
<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>
如果我们有更多的蓝色 div，也会发生同样的情况：
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}
<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>
为了简单起见：浮动元素将与它周围的所有块元素重叠，而内联元素将环绕它。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
