问题的产生
文档流中父元素高度默认由子元素撑开
代码:
<div class="box"> <div class="div"></div> </div>
box{ 300px; margin:0 auto; border:10px solid #000; } .div{ 200px; height:200px; background:red; }
效果:
为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷
.div{200px;height:200px;background:red;float:left;}
清除浮动的方法
第一种:开启BFC
根据W3C的标准,在页面中元素都有一个隐含的属性 Block Formatting Context,简称BFC,默认是关闭的;
开启元素BFC后,元素将会具有以下特性:
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动元素
开启BFC的方法:
1. 给父元素设置宽高【不推荐】
副作用:父元素宽高写死了,不能根据子元素自动调节;
2. 给父元素也添加浮动【不推荐】
副作用:父元素脱离文档流,父元素的宽度会丢失,且会导致下边的元素上移,不能解决问题。
3. 给父元素添加”display:inline-block“【不推荐】
副作用:可以解决问题,但会导致宽度丢失。
4. overflow【常见,副作用最小】
overflow设置为非visible的值。推荐使用hidden(副作用最小)
a) auto (溢出显示滚动条)
b) scroll (默认就显示滚动条)
c) hidden (溢出隐藏)[常用]
注:但在IE6及以下的浏览器中不支持BFC,所以使用这种方式不兼容IE6。在IE6中有类似BFC的隐含属性 hasLayout,开启方式很多,推荐使用zoom:1
第二种:在浮动元素后添加元素,并设置其clear属性
<div class="box"> <div class="div"></div> <!—因为clear元素并未脱离文档流,所以会撑起box元素的高--> <div class="clear"></div> </div> .clear{height:0;font-size:0;clear:both;}
第三种:br元素的clear属性
br元素本身没有高度,所以也就不会存在IE低版本下最小高度问题。只需要在浮动元素下添加一句 : <br clear=”all” />
<div class="box"> <div class="div"></div> <br clear="all"/><!—就这一句解决问题--> </div>
※第四种:after伪类【各大公司推荐】
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,和第二种方法原理相同,可达到相同的效果,而且不会在页面中添加多余的div,这是最推荐的方式,几乎没有副作用
在IE6中,不支持after,所以在IE6中还需要使用hasLayout来处理(zoom:1)
https://www.cnblogs.com/embrace-ly/p/10560934.html
.box:after{content:"";display:block;clear:both;}