防止高度坍塌
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）
解决
1、给父元素添加声明overflow：hidden
优点：代码少、简单
缺点: 不能和position定位配合使用，超出的尺寸会被隐藏
2、在浮动元素下方添加空div， 并给元素声明 clear：both，保险起见，再加height:0。 清除个别块元素可能自带的height:16px;
缺点：需要添加多余的空标签并添加属性
3、万能方式:
box::after{
content: "";
display: block;
clear: both;
height: 0; /*为了清楚个别块元素自带的16px高度*/
}
4、父元素添加浮动
缺点: 可能产生新的浮动问题
其实，父元素定义display:table也行
BFC定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。
简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素。外面的元素也不会影响到区域里面的子元素。 Box，盒子， 是 CSS 布局的对象和基本单位， 直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。
不同类型的盒子区域内的子元素， 会以不同的 Formatting Context（一个决定如何渲染文档的容器）方式渲染。
块级元素盒子，display 属性为 block, list-item, table 的元素，会生成 块级元素渲染区域。并且以BFC( block fomatting context)方式渲染； 行级元素盒子，display 属性为 inline, inline-table 的元素，会生成 行级元素渲染区域。并且以IFC( inline formatting context)方式渲染；
所以，CSS中最常见的渲染方式有两大类：BFC和IFC
BFC的布局规则
默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元素独占一行 块元素垂直方向的总距离由margin决定。属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会
左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔接，不能出现重叠
BFC渲染区域不会与float浮动定义的元素区域重叠。
BFC就是页面上的一个隔离的独立渲染区域，渲染区域里面的子元素不会影响到外面的元素。反之外面的元素也不会影响到渲染区域里边的子元素。
计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。
如何创建BFC
overflow的值不是visible
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
position的值不是static或者relative。
float的值不是none
可以解决哪些问题
避免垂直方向margin合并
问题: 垂直方向上，两个元素上下margin相遇，两元素的间的距离并不等于两个margin的和。而是等于最大的margin。小的margin会被大的margin吞并。 解决:
用一个外围块元素包裹下方元素
设置新外层元素overflow:hidden,变成一个BFC方式的渲染区域
结果
下方元素的margin-top受到新外层元素BFC渲染区域的阻隔，不会影响外部上方的元素的margin-bottom了。同理，外部上方元素的margin-bottom，因为在BFC渲染区域之外，所以，也无法影响其内部元素的margin-top了。
避免垂直方向margin溢出
问题：
子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。而实际上，子元素与父元素之间，依然是没有margin-top的——效果不是想要的。
解决:
设置新外层元素overflow:hidden
变成一个BFC方式的渲染区域
结果
子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域了。子元素的margin-top，才真正成为子元素与父元素上边的间距
其实还可以
为父元素添加上边框，颜色设置为透明
用父元素的padding-top代替第一个子元素的margin-top
在父元素内第一个子元素之前添加一个空的<table></table>,用平级BFC渲染区域阻隔下方元素的margin-top,
父元素::before{ content:""; display:table; }用平级BFC渲染区域阻隔下方元素的margin-top
自适应两栏布局
左固定，右自适应
.left{ float:left; width:固定宽 }
.right{overflow:hidden; ...}
变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了
