BFC块级格式化上下文
大约 1 分钟
BFC块级格式化上下文
【定义】
块级格式上下文,web独立的渲染区域,不会影响边界外的元素
【形成条件】
1、浮动float 2、非静态定位position为absolute或fixed 3、display为inline-block、table-cell、table-caption、flow-root、flex 或 inline-flex 元素的直接子元素、grid 或 inline-grid 元素的直接子元素 4、overflow不为visible 5、contain 值为 layout、content 或 paint 的元素
【BFC特性】
1、内部box会在垂直方向,一个接一个地放置。 2、Box垂直方向的距离由margin决定,在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 3、在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘) 4、形成了BFC的区域不会与float box重叠 5、计算BFC高度时,浮动元素也参与计算
【主要应用】
1、利用特性4可实现左图右文之类的效果; 2、利用特性5可以解决浮动元素造成的父元素高度塌陷问题; 3、解决外边距合并问题; 4、右侧盒子自适应:BFC区域不会与浮动盒子产生交集,而是紧贴浮动边缘。