目录
什么是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，可以有效地控制元素的布局和相互影响。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BFC</title><style>*{margin: 0;padding: 0;}.wp{border: 1px #f00 solid;height: 400px;width: 400px;overflow: hidden;}.wp div{width: 100px;height: 100px;background: pink;margin-left: 50px;}.fl{float: left;width: 200px;height: 200px;background: rgb(213, 70, 94);}</style>
</head>
<body><!-- BFC 块级格式化上下文，BFC规定了在当前元素中块元素的布局方式默认只有一个标签body是块级上下文标签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 或者 absolute4.给元素设置 display，他的值为 flex , inline-flex,table-cell,inline-block--><div class="fl"></div><div class="wp"><div></div><div></div><div></div><div></div></div></body>
</html>
