概念
Bfc全称block formatting context直译为“块级格式化上下文”，它是W3C CSS 2.1规范中的一个概念，他决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，通俗的讲，BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
如何触发BFC
1、浮动元素（元素的 float 不是 none)
2、绝对定位元素（元素的 position为 absolute 或 fixed）
3、行内块元素（元素的 display 为inline-block；table-cell ；flex；inline-flex
）
4、overflow 值不为 visible 的块元素（常用overflow: hidden;）
BFC的布局规则：
1、bfc内部盒子在垂直方向上依次放置, 两个box的外边距(margin)会发生重叠，
从效果上看的话,两个p元素都处于同一个BFC容器中,所以第一个p元素的下边距会和第二个p元素的上边距重合。重合之后，最终显示的边距是取最大的那个值，也就是25px。所以两个p元素之间的边距值是25px，标准的应该是30px才对。
解决方法：
将发生重叠的盒子放在另外一个BFC容器中，即添加一个父盒子，将该盒子设置为BFC容器
2、盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
3、内部每个盒子的margin-left会触碰到容器的border-left，浮动盒子也是这样
4、Bfc区域不会和浮动元素重叠
5、计算bfc高度时，浮动元素会参与计算
6、Bfc里面的子元素不会影响到外面的元素
BFC应用：
1、解决浮动塌陷问题
父元素中只有浮动元素且父元素未设置高度和宽度时，由于浮动元素脱离文档流，所以父元素没有内容，高和坍塌为0
2、margin重叠问题
将盒子都设成bfc盒子
3、margin塌陷
父元素中子元素的margin-top比父盒子的还要大。由于都属于html跟元素下的bfc，所以在垂直方向会发生重叠，取最大值
将父元素设置为bfc overflow：hidden
4、两栏布局
左侧float: fleft 右侧overflow: hidden;
<style>
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: lime;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
网友评论