我正在学习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
样式时, 被移动到了文档流之外, 占据了它原来的位置。但我不明白为什么 和 中的文本会重叠或折行。我是说,当 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{
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:right
时,A会移到右边,但B及其内容仍然保持在左边。你能帮我理解这里发生了什么吗?这是笔记本电脑https://codepen.io/programmerhk/pen/wzkoYE?editors=1100 - Hitesh Kumar