img.png

1、为什么要清除浮动

img.png

2、清除浮动的本质

img.png
img.png
img.png

出现以下这种效果：

如果孩子浮动了，浮动元素不占有位置，父亲有没有高度，此时底下的盒子会跑上来

img.png

清除浮动的方法

img.png

1、额外标签法

img.png

实例代码：

img.png

2、父级添加overflow属性方法

img.png

实例代码

img.png
img.png

3、使用after伪元素清除浮动

img.png

实例代码：

img.png

4、双伪元素清除浮动

img.png
img.png

实例代码：

img.png