首先了解一下BFC是什么?
BFC(block formatting context)块级格式化上下文,解释起来解释独立渲染区域,内部不影响外部,外部不影响内部,
如何生成BFC?
满足以下四个条件中任意一个
1.float不是none
2.position不是static或relative
3.display为inline-block、table、table-cell、inline-flex、flex、 table-caption.
4.overflow的值不是visible
在了解了BFC的定义以及生成条件之后, 我们看看BFC能快速解决哪些问题?
1.父元素高度塌陷(推荐方法4)
父元素的高度，都是由内部未浮动子元素的高度撑起的。如果子元素浮动起来，就不 占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌。
1. 为父元素设置overflow:hidden属性
原理: CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。
缺点: 如果刚好父元素有些超范围的子元素内容需要显示(比如，个别position定位的子菜单项)，不想隐藏，就会发生冲突。
2. 在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）
原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理
缺点: 无端多出一个无意义的看不见的空元素，影响选择器和查找元素。
3. 设置父元素也浮动
原理: 浮动属性会强制父元素包裹所有浮动的内部元素
缺点: 会产生新的浮动影响。
4. 父元素添加伪类,父元素::after{ content:""; display:block; clear:both; height:0 } --最完美解决方案
2.margin垂直合并
属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会 解决方法: 用一个外围块元素包裹下方元素, 给外围元素设置一个before伪类::before{ content:””; display:table} 原理: 在子元素之前形成平级的bfc渲染区域。不允许子元素的margin进入::before范围内 (如果设置新外层元素overflow:hidden,这个方法会导致溢出的部分无法显示.)
3.margin溢出
子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。 1.父元素设置overflow:hidden属性 原理: 父元素变成BFC渲染区域，就必须包裹内层子元素的margin 缺点: 导致溢出的部分无法显示 2.为父元素添加上边框，颜色设置为透明（transparent） 原理: 这里不是bfc。而是因为边框本身可以阻隔margin溢出。 缺点: 由于父元素的border不能为0, 边框会增大父元素的实际大小，导致布局错乱 3.为父元素设置padding-top 原理: 这里也不是bfc,而是父元素的padding-top取代了子元素margin-top 缺点: 对父元素高度有影响。 解决: 可以设置父元素box-sizing:border-box 4.在父元素的第一个元素前增加一个空的
4.左定宽,右自适应
左边定宽元素左浮动: .left{ float:left; width:固定宽 } 右边元素不用右浮动，而是.right{overflow:hidden; … }
