前端必知:38.对BFC的认识与理解

目录

什么是BFC

BFC的特点 

BFC 的布局规则

创建一个BFC的方法

---

什么是BFC

       BFC（Block Formatting Context）是 CSS 中的一个概念，用于描述页面中块级元素如何布局和相互影响的规则和上下文。BFC 是页面渲染时创建的一个独立的布局环境，它决定了块级元素在其内部如何排列、定位和相互作用。

        BFC 定义了一组规则，这些规则决定了在 BFC 内部的元素如何布局和渲染，以及与其他元素之间的交互方式。BFC 可以看作是一个隔离的容器，其中的元素按照特定的规则进行布局，不会影响到外部的元素。

BFC的特点 

1.BFC 是一个独立的布局环境，BFC内部的布局和外部不会相互影响

2.可以通过一些方法触发BFC，完成一个独立的布局环境

 BFC 的布局规则

1.BFC内部的块元素，会从上到下一个一个的垂直排列

2.BFC规定了 两个相邻的块元素他们的上下margin 重合

3.每一个元素的margin 盒模型的左边，与包含border 盒模型的左边(margin-left),与包含他的父border 盒模型的左边（border-left）相接触

4.每一个BFC区域不会和浮动的元素重叠

5.每一个BFC区域都是独立的，他里面的内容和外面的内容相互不影响

创建一个BFC的方法

1.给元素添加overflow ，注意他的值 visible除外

2.给元素设置浮动，注意 浮动值 none除外

3.给元素设置 position，他的值是 fixed 或者 absolute

4.给元素设置 display，他的值为 flex , inline-flex,table-cell,inline-block

BFC 是一种非常有用的概念，在处理复杂布局、解决浮动相关问题或防止外边距折叠等情况下发挥重要作用。通过创建 BFC，可以有效地控制元素的布局和相互影响。