BFC

「这是我参与2022首次更文挑战的第6天，活动详情查看：[2022首次更文挑战](https://juejin.cn/post/7052884569032392740 "https://juejin.cn/post/7052884569032392740")」 ## 一、BFC ### 1-1、BFC介绍 **BFC**：块级格式上下文（Block Formatting Context）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域 - display为block table list-item的元素会生成块盒子，**参与块级格式上下文** ### 1-2、BFC的创建方法 1. 根元素（html） 1. float除了none以外的值，left / right 3. position除了static和relative以外的值，absolute / fixed 3. overflow除了visible以外的值 auto / hidden / scroll 5. 元素类型（即display属性）为inline-block table-caption table-cell ### 1-3、BFC的特点 1. 在**同一个BFC中**，盒子从顶端开始一个接着一个垂直排列，两个相邻盒子之间的垂直距离由margin决定 **，垂直方向的外边距会叠加** - 所以，如果在一个BFC中有一个盒子是span这种行内元素，则不会垂直排列，因为**块级盒子才会参与BFC** 2. 在一个BFC中，每一个盒子的左外边界margin-left会紧贴着包含盒子的容器的左边界，浮动元素也是如此 2. 在一个BFC中，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素，则该BFC的区域不会与float元素的区域重叠 **（通常用来避免文字环绕、创建自适应两列布局）** 4. BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响外部的元素 **（通常用于解除外边距合并）** 4. 计算一个BFC的高度时，其内部浮动元素的高度也会参与计算 **（通常用来清除浮动）** ### 1-4、BFC的用途 #### 1-4-1、创建BFC来避免垂直外边距叠加 - 由同一个BFC中相邻的margin-top和margin-bottom会叠加的特点可知，为避免垂直外边距合并问题，可以将两个不同元素放在不同的BFC中解决 **代码示例**： ``` BFC

``` **效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee75cf1e17074e919d2ce0716af484e0~tplv-k3u1fbpfcp-zoom-1.image) #### 1-4-2、创建BFC来清除浮动 - 由计算一个BFC的高度时，其内部浮动元素的高度也会参与计算可知：可以通过创建BFC来清除浮动（如：给父级盒子添加overflow: hidden;） - 这是因为，给父元素添加overflow: hidden后会使父元素变成了一个BFC，BFC在计算它的高度时候，会把浮动元素计算进去 - 也可以给父元素添加 float: left或display: inline-block **代码示例：** ``` BFC

``` **效果：** - **父元素未添加overflow: hidden;** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8d80f301edc4301b8d7bdf6a1a6a8d8~tplv-k3u1fbpfcp-zoom-1.image) - **父元素添加overflow: hidden;** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06cf718dc5df4464a44a6b48fb9ebf0f~tplv-k3u1fbpfcp-zoom-1.image) #### 1-4-3、创建BFC避免文字环绕 - 有时候浮动div旁边的文字会环绕它，此时可通过创建BFC来避免 - 由一个BFC内部如果存在一个新的BFC并且存在浮动元素，则**新的BFC不会与float元素的区域重叠**可知 **代码示例：** ``` 26-Css中的重要概念-BFC&IFC

水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！

``` - **未创建新的BFC，产生文字环绕：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5626aa8ff79481481e68162238ea6bb~tplv-k3u1fbpfcp-zoom-1.image) - **创建了新的BFC，避免文字环绕：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d12795c2e3c2491491470bc974120780~tplv-k3u1fbpfcp-zoom-1.image) #### 1-4-4、使用BFC创建自适应两列布局 - 除了可以使用负margin来实现自适应两列布局外，还可以使用BFC创建自适应两列布局 - 原理与避免文字环绕相同 **代码示例：** ``` BFC

``` **效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e236b2b72964dfb936239ebd9cd8670~tplv-k3u1fbpfcp-zoom-1.image)