理解CSS浮点
我是精益HTML和CSS。我被float的财产搞糊涂了。我不知道为什么这让我很困惑。我正在使用这些文章 至 理清。当我们应用float元素时，我得到了这个部分，它脱离了正常的流，并根据float的值向左和右浮动，下面的内容将围绕在它周围并试图包装它。我感到困惑的地方是我会举例解释。我有三个div A，B，C。就像我在片段中共享的那样：
body {
background: #eaeaed;
}
div{
border : 2px solid #ff00ff;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.divA{
background: yellow;
}
.divB{
background: green;
}
.divC{
background: blue;
}<div class="divA">
<span>Div A</span>
</div>
<div class="divB">
<span>Div B</span>
</div>
<div class="divC">
<span>Div C</span>
</div>
现在，当我将float:left应用于divA时。它从流中移出，divB取其位置。但我无法理解divB内部的文本发生了什么变化。为什么B和C的文本是折叠/重叠的。我的意思是，当A被浮动时，它应该被移出流，下面的元素应该代替它，但是不知道为什么只有divB代替它，但是B的内容仍然在那里。谢谢你的帮助。
body {
background: #eaeaed;
}
div{
border : 2px solid #ff00ff;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.divA{
background: yellow;
float: left;
}
.divB{
background: green;
}
.divC{
background: blue;
}<div class="divA">
<span>Div A</span>
</div>
<div class="divB">
<span>Div B</span>
</div>
<div class="divC">
<span>Div C</span>
</div>
回答 2
Stack Overflow用户
发布于 2016-10-26 07:21:49
B的方框在A的原始位置下移动，但文本不移动。文本必须环绕浮动，因为浮动的主要思想是让文本环绕，而不是被浮动的内容重叠。
“环绕”一词意味着文本应该出现在A的旁边而不是下面，但是两个元素的宽度是相同的，没有留下文本与A并排出现的空间。增加B的宽度表明，当文本有空间时，文本就会并排开始：
body {
background: #eaeaed;
}
div{
border : 2px solid #ff00ff;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.divA{
background: yellow;
float: left;
}
.divB{
width: 160px;
background: green;
}
.divC{
background: blue;
}<div class="divA">
<span>Div A</span>
</div>
<div class="divB">
<span>Div B</span>
</div>
<div class="divC">
<span>Div C</span>
</div>
B文本似乎与C文本重叠，因为严格地说，B文本是浮动A的结果，B文本溢出了一个框--即使该框有overflow: visible，这里的所有三个元素也是如此--对框外的内容没有任何影响。
Stack Overflow用户
发布于 2016-10-26 07:39:38
请参阅可视化格式化模型-浮动
由于浮点数不在流中，所以在浮点数框之前和之后创建的非定位块框垂直地流动，就好像浮点数不存在一样。但是，在浮点数旁边创建的当前和后续行框在必要时会被缩短，以便为浮动的边距框腾出空间。
因此，.divA与.divB重叠。但是.divB中的行框缩小了。
如果让.divB比浮动更宽，就更容易看出：
body {
background: #eaeaed;
}
div {
border: 2px solid #ff00ff;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
}
.divA {
background: yellow;
float: left;
width: 100px;
height: 80px;
}
.divB {
background: green;
}
.divC {
background: blue;
}<div class="divA">
<span>Div A</span>
</div>
<div class="divB">
<span>Div B</span>
</div>
<div class="divC">
<span>Div C</span>
</div>
但是，在您的示例中，.divB的宽度与.divA相同。所以线盒缩小到0。因此，.divB的文本不适合在这里，并包装到下一行框。该行框将溢出.divB和重叠.divC，因为您使用的是相等的line-height和height。
https://stackoverflow.com/questions/40264773
复制
相似问题
组合框外观
给WixUIExtension对话框一个稍微更现代的外观
对话框中表格中的jqueryui组合框外观错误
对话框具有现代外观的时间设计，但旧外观的运行时(使用可视C++和资源编辑器)
Javascript气球外观对话框
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
