了解CSS浮动 [英] Understanding CSS Float
问题描述
float 属性弄糊涂了。我不明白为什么这让我很困惑。我正在使用这些文章 到 了解。当我们应用 float 元素时，我得到了这部分元素根据 float的值从正常流中移出并浮动到其父项的左侧和右侧和它下面的内容将围绕它并尝试包装它。
我感到困惑的部分是我将通过示例来解释。我有三个div A，B，C。正如我在片段中分享的内容：
body {background：#eaeaed;} div {border：2px solid＃ff00ff;宽度：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;宽度：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;宽度：100px; height：100px; text-align：center; line-height：100px;}。divA {background：yellow; float：left;}。divB {width：160px;背景：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> B文本似乎与C文本重叠，因为严格来说，由于浮动A，B文本会溢出框。溢出框的内容 - 即使该框具有 overflow：visible ，就像这里所有三个元素的情况一样 - 对框外的内容没有影响。
I am leanring HTML and CSS. I have been muddled up by float property. I don't why this is confusing me a lot. I am using these articles to understand. I got this part when we apply float element is put out of the normal flow and floated to left and right of it's parent based on the value of float and the content below it will flow around it and try to wrap it.
The part where I am confused is I'll explain by example. I have three div A, B, C. As I have shared in the snippet:
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>
Now when I apply float:left to divA. It gets moved out of the flow and divB takes it's position. But I am not able to understand what is happening with the text inside divB. Why the text of B and C are collapsing/overlapping. I mean when A is floated, it should be moved out of the flow and the element below should take it's place but don't know why only divB is taking it's place but B's content is stil there as it is. Thanks for you help.
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>
The box of B moves underneath A's original position, but the text does not. The text has to wrap around the float instead, since the main idea of floats is for text to wrap around rather than be overlapped by the floating content.
The word "wrap" implies that the text should appear next to A rather than underneath it, but the width of the two elements is the same leaving no room for the text to appear side by side with A. Increasing the width of B shows that the text does start off side by side when there is room for it to do so:
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>
The B text appears to be overlapping with the C text because, strictly speaking, the B text is overflowing the box as a consequence of floating A. Content that's overflowing a box — even if that box has overflow: visible, as is the case for all three elements here — has no effect on content outside the box.
这篇关于了解CSS浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
