首先,先弄清楚两个概念标准流和浮动
标准流:在HTML布局里,每个盒子会各占整行位置。子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度。
浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒 子高度为0。直观看到的效果就是多个块级元素在一行显示,且块与块之间没有空隙,父级盒子没有高度。
示例代码:
```<div></div>```
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
<style>
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
</style>
```
页面展示效果:
其次,为什么会浮动呢?
子盒子设置了float,导致子盒子脱离了正常的文档流,浮了起来,影响了父盒子以及兄弟盒子的布局
最后,怎么清除浮动?
改变DOM解构
不改变DOM,通过CSS清除浮动