什么是BFC？

最新推荐文章于 2023-02-04 21:13:09 发布

小荣啊啊

最新推荐文章于 2023-02-04 21:13:09 发布

阅读量160

点赞数 2

文章标签： css html5 前端

本文链接：https://blog.csdn.net/qq_45928378/article/details/115493672

版权

1、BFC的定义

MDN:

块格式化上下文（Block Formatting Context，BFC）
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

读完是一头雾水😅，W3C 规范对此作了详细的描述，翻译过来大概如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和table-captions），以及 overflow 值不为visiable 的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。
在 BFC 中，盒子从顶端开始垂直的一个接一个排列，两个盒子之间的垂直间距由他们的 margin 值决定，在同一个 BFC 中，两个相邻块级盒子的垂直外边距会产生折叠。
在 BFC 中，每一个盒子的左外边缘会触碰到容器的左边缘，对于从右到左的格式来说，则触碰到右边缘。即使在浮动里也是这样的（尽管一个盒子的line boxes 会因为浮动而收缩），除非这个盒子的内部创建了一个新的 BFC。

2、如何创建BFC

MDN:

3、BFC的布局规则

内部的box会在垂直方向，一个接一个地放置
Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
BFC的区域不会与float box 重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算

4、BFC的作用

1. 解决margin重叠问题

* {
    margin: 0;
    padding: 0;
}
.box {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	margin: 100px;
}
</style>
<body>
<div class="boxs">
	<div class="box"></div>
	<div class="box"></div>
</div>
</body>

根据BFC的布局规则第2点可知，同一个BFC下的盒子垂直方向的margin会发生重叠，所以会造成两个box之间的margin是100px而不是200px，而根据BFC布局规则第5点就可以解决这个问题，给其中一个box创建BFC布局。

<style>
 1. {
    margin: 0;
    padding: 0;
}
.container {
	overflow: hidden;
}
.box {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	margin: 100px;
}
</style>
<body>
<div class="boxs">
	<div class="container">
		<div class="box"></div>
	</div>
	<div class="box"></div>
</div>
</body>

2. 解决高度塌陷问题

<style>
* {
    margin: 0;
    padding: 0;
}
.container {
	border: 1px solid #333;
	width: 400px;
}
.box {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	float: left;
}
</style>
<body>
	<div class="container">
		<div class="box"></div>
	</div>
</body>

高度塌陷就是父元素高度自适应，子元素 float 后，造成父元素高度为0。利用BFC布局规则的第6点，我们就可以解决这个问题。

<style>
* {
    margin: 0;
    padding: 0;
}
.container {
	border: 1px solid #333;
	width: 400px;
	overflow: hidden;
}
.box {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	float: left;
}
</style>
<body>
	<div class="container">
		<div class="box"></div>
	</div>
</body>

3. 清除浮动

* {
    margin: 0;
    padding: 0;
}
.one {
	width: 200px;
	height: 200px;
	background-color: green;
	float: left;
}
.two {
	height: 200px;
	background-color: pink;
}
</style>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>

利用BFC布局规则的第6点，我们就可以清除浮动，同时也可以实现自适应两栏布局。

* {
    margin: 0;
    padding: 0;
}
.one {
	width: 200px;
	height: 200px;
	background-color: green;
	float: left;
}
.two {
	height: 200px;
	background-color: pink;
	overflow: hidden;
}
</style>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>

小荣啊啊

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
什么是BFC？

1、BFC的定义MDN中的定义块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。在这里插入代码片读完是一头雾水????，W3C 规范对此作了详细的描述，翻译过来大概如下浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为visiable 的块级盒子，都
复制链接

扫一扫