了解 CSS 浮动

Question

我正在学习 HTML 和 CSS。我被float属性搞糊涂了。我不明白为什么这让我很困惑。我正在使用这些 articles to understand。当我们应用 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的文字都是collapsing/overlapping。我的意思是，当 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>

Answer 1

B 的框移动到 A 的原始位置下方，但文本没有移动。文本必须环绕浮动，因为浮动的主要思想是让文本环绕而不是被浮动内容重叠。

单词 "wrap" 意味着文本应该出现在 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 文本重叠，因为严格来说，由于浮动 A，B 文本溢出框。溢出框的内容— 即使该框有 overflow: visible，就像这里所有三个元素的情况一样 — 对框外的内容没有影响。

Answer 2

参见Visual formatting model - Floats：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

所以 .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.

了解 CSS 浮动

Understanding CSS Float

html

css

css-float