清除浮动的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
posted @ 2015-09-25 13:28  黑客PK  阅读(226)  评论(0编辑  收藏  举报