Question

我倾向于使用HTML和CSS。我被float财产混淆了。我不知道为什么这让我很困惑。我正在使用这些articles to understand。当我们应用float元素时，我得到了这个部分，它被排除在正常流程之外，并根据float的值浮动到它的父级左右，并且它下面的内容会流动围绕它并尝试包装它。我感到困惑的部分是我将通过实例解释。我有三个div A，B，C。正如我在片段中分享的那样：

＆＃13;

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;
}

＆＃13;

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

＆＃13;

现在我将float:left应用于divA。它被移出流程并divB占据了它的位置。但是我无法理解divB中的文本发生了什么。为什么B和C的文本正在折叠/重叠。我的意思是当A浮动时，它应该被移出流量，下面的元素应该占据它的位置，但不知道为什么只有divB才能占据它的位置但是B的内容依旧存在。谢谢你的帮助。

＆＃13;

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;
}

＆＃13;

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

＆＃13;

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：

由于浮动不在流中，因此创建了未定位的块框在浮动箱垂直流动之前和之后，好像浮子没有存在。但是，旁边创建的当前和后续行框必要时缩短浮子以为边缘盒腾出空间浮动。

因此.divA重叠.divB。但是.divB中的行框缩小了。

如果让.divB宽于浮点数，则更容易看到：

＆＃13;

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;
}

＆＃13;

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

＆＃13;

但是，在您的情况下，.divB的宽度与.divA相同。因此，行框缩小为0.因此，.divB的文本不适合那里，并且包装到下一个行框。该行框会溢出.divB并重叠.divC，因为您使用了相等的line-height和height。

了解CSS Float

2 个答案: