清除浮动的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