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
高度塌陷问题解决,且副作用最小,可以采用
