HTML – 了解CSS Float

我倾向于HTML和CSS.我被浮动财产混淆了.我不是为什么这让我很困惑.我正在使用这些 articles to understand.当我们应用浮动元素时,我得到了这个部分被放出正常流程并根据浮动的值浮动到它的父级的左右,并且它下面的内容将围绕它流动并尝试包装它.
我感到困惑的部分是我将通过例子解释.我有三个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 to 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>

解决方法

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文本溢出了框.内容溢出一个框 – 即使该框有溢出:可见,如同这里所有三个元素 – 对框外的内容没有影响.

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...