我倾向于HTML和CSS.我被浮动财产混淆了.我不是为什么这让我很困惑.我正在使用这些
articles
to
understand.当我们应用浮动元素时,我得到了这个部分被放出正常流程并根据浮动的值浮动到它的父级的左右,并且它下面的内容将围绕它流动并尝试包装它.
我感到困惑的部分是我将通过例子解释.我有三个div A,B,C.正如我在片段中分享的那样：
我感到困惑的部分是我将通过例子解释.我有三个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文本溢出了框.内容溢出一个框 – 即使该框有溢出：可见,如同这里所有三个元素 – 对框外的内容没有影响.
