细说BFC

最新推荐文章于 2023-04-16 18:03:18 发布

喵酱YY

最新推荐文章于 2023-04-16 18:03:18 发布

阅读量564

点赞数

分类专栏：前端文章标签： BFC

本文链接：https://blog.csdn.net/ErMiaoYY/article/details/86232210

版权

20 篇文章 0 订阅

订阅专栏

FC（Formatting Contexts）即格式化上下文，是W3C CSS2.1规范的一个概念，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局以及和其他元素之间的关系和作用

常见的FC有：BFC（块级格式化上下文）IFC（行级格式化上下文）、GFC（网格布局格式化上下文）、FFC（自适应格式化上下文）

BFC（Block Formatting Contexts）即块级格式化上下文，具有BFC特性的元素相当于一个带有屏蔽罩的容器，容器里面的元素无论如何布局都对外边的元素没有影响，并且该容器具有一些普通容器没有的特性。

它可以理解为某个元素的一个CSS属性，但又不能被显式修改，BFC属性元素对内对外都有一些特性。引用《CSS世界》里的比喻，BFC容器就像一个结界，具有内部元素不被外部元素影响也不影响外部元素的重要原则，而BFC的特性都是基于此原则展开的。

（1）同一个BFC下的元素之间，外边距发生重叠（防止内元素影响外元素）

（2）BFC容器可以包裹容器内浮动的元素（防止内元素影响外元素）

（3）BFC容器能够阻止容器内元素被容器外浮动元素的覆盖（防止外元素影响内元素）

（1）<html><body>根元素

（2）display属性设置为inline-block 、table-cell、table-caption 、flex

（3）float属性设置除了none以外的left、right、inherit

（4）position属性设置为absolute 和 fixed

（5）overflow属性设置为除了visible以外的hidden、auto、scroll

（1）自适应两栏布局（重要）

float ：浮动元素具有破坏性和包裹性，失去元素本身的流体自适应性，不适合做自适应布局

position：absolute 脱离文档流，不能很好适应非定位元素，不适合自适应

overflow：auto / hidden 能够实现自适应布局，IE7及以上版本适用。缺点：容器盒子外的内容被遮盖

display：inline-block IE6、IE7很好的支持自适应布局

display: table-cell IE8以及以上版本支持自适应布局，缺点：连续英文字符不能换行

因此，支持自适应布局的BFC属性中，提供两套方案：

1. overflow:hidden

2. display：inline-block +display：table-cell

{   
    display：table-cell;
    width：9999px;
     /*     兼容IE7     */
    *display: inline-block;                          
}

（2）阻止元素被浮动元素覆盖

（3）清除内部浮动，即可以包含浮动元素

父元素中有两个子元素分别设置左右浮动，左浮动子元素接触父元素border-box的左边，右浮动子元素接触父元素border-box的右边，且父元素高度塌陷，需要清除浮动来解决高度塌陷问题。触发父元素的BFC，使两个子元素处于同一个BFC中达到清除浮动的效果。

（4）阻止margin重叠——分属于两个不同的BFC

参考特性１，两个同一BFC下的子元素之间的margin相互重叠，为防止这种情况，在其中一个子元素外加一个触发BFC的div, 这样两个子元素分属于两个BFC则margin不会重叠。

参考文档：

关注

专栏目录