理解CSS浮动

Question

理解CSS浮动

5

我正在学习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 样式时，被移动到了文档流之外，占据了它原来的位置。但我不明白为什么和中的文本会重叠或折行。我是说，当 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{
  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>

- Hitesh Kumar

2个回答

3

请参考可视化格式模型 - 浮动：

由于浮动不在流中，因此在浮动框之前和之后创建的未定位块级盒子垂直地流动，就好像浮动不存在一样。但是，为了给浮动的外边距箱留出空间，与当前和随后相邻的浮动框创建的行框将缩短。

所以

与

重叠。但

中的线框会收缩。

如果您将

设置得比浮动更宽，则更容易看到：

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。

- Oriol

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

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>

由于A浮动，B文字似乎与C文字重叠，严格来说，B文字由于溢出框而溢出。即使框具有overflow: visible(对于这三个元素都是如此)，溢出框内的内容对框外的内容没有影响。