这是设计使然,因为这是float的工作方式。如果您参考文档:
float CSS属性在其容器的左侧或右侧放置一个元素,从而使 。该元素 页面 中 ,尽管仍然保留一部分。
您应该注意float元素的2个功能:
以下是一些基本示例,您可以更好地了解它们:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}
<div class="float"></div>
<div class="blue"></div>
蓝色div与float元素重叠,因为它是一个块级元素。
如果将其设置为内联级别元素(inline-block
),则不会
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}
<div class="float"></div>
<div class="blue"></div>
当我们添加文本时,您会注意到文本将如何环绕float元素,并将如何保留在它的包含块(蓝色div)中。
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}
<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>
如果我们有更多的蓝色div,也会发生相同的情况:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}
<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>
为了简单起见:float元素将与周围的所有block元素重叠,而inline元素将环绕其周围。