一、防止父元素高度坍塌
1. 给父元素设置固定高度（不推荐）
缺点：多数情况下，父元素高度由内容撑起，很难提前固定父元素的高度
2. 为父元素设置overflow: hidden属性(形成了BFC区域)。
原理：CSS中的overflow: hidden属性会强制要求父元素必须包裹住所有内部浮动元素，以及所有元素的margin范围。
缺点：如果刚好父元素有些超范围的子元素内容需要显示，不想隐藏，就会发生冲突。
3. 在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear: both）(形成了BFC区域)。
原理：利用clear: both属性和父元素必须包裹非浮动元素两个原理。
缺点：无端多出一个无意义的看不见的空元素，影响选择器和查找元素。
4. 设置父元素也浮动（需要给父元素之后的平级元素清除浮动（clear: both））。
原理：浮动属性也会强制父元素扩大到包含所有浮动的内部元素。
5. 为父元素末尾伪元素设置clear: both。
优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题。
问题：个别浏览器，display;;table，可能带默认高度，保险起见，再加一个属性：height: 0px。
父元素::after{content: '';display: table; clear: both; height: 0px}
二、什么是BFC
1、概念：
1. BFC(Block Formatting Content)，块级格式化上下文。
2. 他是网页中一个独立的渲染区域。
3. 这个区域只有块级元素才能参与。
4. 它规定了内部的块级元素如何布局。
5. BFC渲染区域内部如何布局，与外部毫不相关。
6. 外部元素也不会影响BFC渲染区域内的元素。
2、css内部有两种渲染区域：
BFC: 所有display属性为block, table, list-item的元素，会形成块级元素渲染区域。
IFC: 所有display属性为inline, inline-block, inline-table的元素，会形成行级元素渲染区域。
3、BFC的布局规则：
1. 默认内部的块级元素会在垂直方向，一个接一个地放置，每个块元素独占一行。
2. 块元素垂直方向的总距离由边框内大小+margin共同决定。
3. 属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会。
4. 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。
4、4种情况会形成BFC渲染区域：
1. float的值不是none。
2. position的值不是static或者relative.
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible.
5、BFC可以解决的问题：
1. 防止父元素高度坍塌。
2. 避免垂直方向margin合并。
3. 避免垂直方向的margin溢出。
4. 左定宽，右自适应布局。
5.1避免垂直方向margin合并：
第一步：用一个外围块元素包裹下方元素
第二步：设置新外层元素overflow:hidden。
原理：新外层元素，变成一个BFC方式的渲染区域，就必须包裹内部子元素及子元素的margin。
缺点：父元素中自由定位的子元素，希望即使超出父元素的范围，也能显示，就冲突了。
解决: 修改第二步为: 父元素::before{content: '',display:table;}
原理： display: table，在子元素之前形成平级的BFC渲染区域。不允许子元素的margin进入::bofore范围内。
优点：既不隐藏内容，又不添加新元素，又不影响高度。
5.2 5种解决垂直方向的margin溢出：
1.设置父元素overflow: hidden。（形成BFC区域）
2.为父元素添加上边框，颜色设置为透明（transparent）注意：不是BFC，而是边框本身可以阻止margin溢出。
3.用父元素的padding-top代替第一个子元素的margin-top(同时父元素box-sizing：border-box)。注意：不是BFC，而是padding本身可以阻止margin溢出。
4.在父元素内第一个字元素之前添加一个空的<table></table>
5.父元素::before{content: '', display: table;}
5.3 左定宽，右自适应布局：
第一步： 左定宽元素左浮动：.left {float: left; width：固定宽}
第二步：右边元素不用右浮动，而是..right {overflow: hidden; }
