<<查看全部Demo

清除浮动的7种方法

子元素浮动后,父容器高度塌陷:

高度塌陷啦!父容器包不住子元素啦!

方法1:增加标签clear:both

增加标签 <div style="clear: both;"></div>

方法2:增加标签

增加标签 <br clear="all" />

方法3:父容器使用::after伪元素清除浮动

父容器div增加class="clearfix"

方法4:父容器overflow:hidden

父容器设置样式overflow:hidden

方法5:父容器overflow:auto

父容器设置样式overflow:auto

方法6:父容器设置display

父容器设置样式display:table

方法7:父容器也浮动

父容器设置样式float:left