BFC解决高度塌陷

定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。

作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

 

隐藏属性BFC默认为关闭的,开启元素的BFC后,元素将有如下特性:
1.父元素的垂直外边距不会和子元素的重叠
2.开启BFC的元素不会被浮动元素覆盖
3.开启BFC的元素可以包含浮动的子元素

 

开启BFC的方式:
1:设置元素浮动
2.设置元素的绝对定位
3.通过display设置为inline-block
4.设置overflow为非默认值visable的任意值,hidden的副作用最小(较常用)

<style type="text/css">
.box1 {
　　border: #5F9EA0 solid 5px;
}

.box2 {
　　width: 200px;
　　height: 200px;
　　background-color: yellow;
}

.box3 {
　　width: 200px;
　　height: 200px;
　　background-color: red;
}
</style>

<div class="box1">

　　<div class="box2"></div>
</div>
<div class="box3"></div>

 

没有发生高度塌陷的样式:

 

为box2设置float:left后,高度塌陷:

 

一、为box1设置float:left
高度虽然不塌陷,可以撑开父元素,但父元素的宽度部分丢失,且其下面的兄弟元素box3向上移动,不可以解决问题.不可取

 

 

 

 

二、为父元素box1设置 display: inline-block;

这种方式虽然可以撑开父元素,但仍>然会造成父元素宽度的丢失,可以解决问题,但不可取

 

 

 

 

三、为父元素box1设置overflow:hidden

高度塌陷问题解决,且副作用最小,可以采用

 

 

 

 

但是在**IE6中并不支持BFC,故BFC不能兼容IE6,**但可以通过IE6中的另一个隐藏属性hasLayout来做到类似的效果,通常使用zoom:1来开启hasLayout ,其中zoom:数字 ,数字表样式放大倍数
代码如下：

<style type="text/css">
.box1 {
　　border: #5F9EA0 solid 5px;
　　/* float: left; */
　　/* display: inline-block; */

　　overflow: hidden;
　　zoom: 1;
}

.box2 {
　　width: 200px;
　　height: 200px;
　　background-color: yellow;
　　float: left
}

.box3 {
　　width: 200px;
　　height: 200px;
　　background-color: red;
}
</style>

<div class="box1">

　　<div class="box2"></div>

</div>

<div class="box3"></div>