了解CSS Float

Question

我倾向于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>

Answer 1

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

\n\n

“换行”一词意味着文本应出现在 A 旁边而不是其下方，但是两个元素的宽度相同，没有空间让文本与 A 并排出现。增加 B 的宽度表明：当有空间时，文本确实会并排开始：

\n\n

\r\n

\r\n

body {\r\n  background: #eaeaed;\r\n}\r\ndiv{\r\n  border : 2px solid #ff00ff;\r\n  width: 100px;\r\n  height: 100px;\r\n  text-align: center;\r\n  line-height: 100px;\r\n}\r\n.divA{\r\n  background: yellow;\r\n  float: left;\r\n}\r\n.divB{\r\n  width: 160px;\r\n  background: green;\r\n}\r\n.divC{\r\n  background: blue;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

B 文本似乎与 C 文本重叠，因为严格来说，由于 A 浮动，B 文本溢出了该框。溢出框 \xe2\x80\x94 的内容，即使该框具有overflow: visible,与这里所有三个元素的情况一样， \xe2\x80\x94 对框外的内容没有影响。

\n