css bfc的理解
（原创版）css中的position属性
1.BFC 的定义和作用 
2.BFC 的特性 
3.如何创建 BFC 
4.BFC 的应用场景
正文
在 CSS 中，BFC（Block Formatting Context）是一个重要的概念，它指的是一个独立的块级格式化区域，可以理解为一个独立的容器，在这个容器内部的元素布局不会受到外部元素的影响，反之亦然。
BFC 的特性主要有以下几点： 
1.内部的盒子会在垂直方向上一个接一个地放置。 
2.盒子垂直方向的距离由 margin 决定。 
3.盒子不会重叠。 
4.BFC 的区域不会与 float 区域重叠。
要创建 BFC，有以下几种方法： 
1.根元素（`<html>`）本身就是一个 BFC。 
2.`float`属性可以创建 BFC。 
3.`position`属性值不为`static`时，可以创建 BFC，具体为`relative`、`absolute`、`fixed`。 
4.`display`属性值为`inline-block`、`table-cell`、`table-caption`、`flex`、`grid`、`grid-template-columns`、`grid-template-rows`时，可以创建 BFC。 
5.`overflow`属性值不为`visible`时，可以创建 BFC，具体为`hidden`、`scroll`、`auto`。
BFC 的应用场景有很多，比如清除浮动、防止外边距折叠、制作多列布局等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。