理解BFC

最新推荐文章于 2022-09-16 10:56:07 发布

苏无

最新推荐文章于 2022-09-16 10:56:07 发布

阅读量129

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_40452130/article/details/99877527

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

框模型（Box Model）：在css中也叫作“盒模型”，是网页布局的基础，文档中的每一个元素都是一个矩形的盒子。框模型有多种类型，可以通过display来设定，最常见的类型有block，line，line-block。

块格式化上下文（Block Formatting Context，BFC） ：块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，规定了内部元素的布局，并使内部元素不被外界影响。

BFC生成条件：

根元素（<html>）
float不为none
position为fixed或absolute
display为inline-block、table、table-row、table-row-group、table-header-group、table-footer-grouptable-caption、table-cell、inline-table、flow-root、flex、grid、inline-flex、 inline-grid
overflow不为 visible 的块元素
contain值为layout、content或 paint 的元素
column-count 或 column-width 不为 auto，包括 column-count 为 1
column-span 为 all 的元素

BFC的作用

1、使BFC区域不被外界的float box影响；

举个例子：有两个div，使第一个div元素浮动，脱离文档流，此时浮动的div叠在第二个div方面，第二个div的文本会包围浮动的div。

.float{
	float: left;
	width: 150px;
	height: 100px;
	background:cornflowerblue;
}
.box{
	width: 300px;
	height: 150px;
	background: mediumslateblue;
}

<div class="float">这是一个float box</div>
<div class="box">这是一个box</div>

效果：
在这里插入图片描述
按BFC的条件，使第二个div的overflow不为none，创建一个BFC，此时第二div的内容不再被浮动元素影响，不再包围浮动元素，并且不再重叠（position为fixed或absolute的BFC除外，仍会重叠）。

.float{
	width: 150px;
	height: 100px;
	float: left;
	background:cornflowerblue;
}
.box{
	width: 300px;
	height: 150px;
	overflow:hidden; 
	background: mediumslateblue;
}

<div class="float">这是一个float box</div>
<div class="box">这是一个box</div>

效果：
在这里插入图片描述
若.box元素未设置宽度，则会自适应剩余宽度（position为fixed或absolute的BFC除外）。

2、包裹内部的浮动内容，防止内容塌陷；

当一个div存在浮动的子元素，且没有足够的文本导致div的高度低于浮动元素的高度，而导致内容塌陷，例：

.float{
	width: 150px;
	height: 100px;
	float: left;
	background:cornflowerblue;
}
.box{
	width: 300px;
	border: 2px lightcoral solid;
}

<div class="box">
	<div class="float">
		这是一个float box
	</div>
	这是一个box
</div>

效果：
在这里插入图片描述
此时，给.box元素加上overflow为hidden，创建一个BFC，浮动元素就被包裹在其中了。

.float{
	width: 150px;
	height: 100px;
	float: left;
	background:cornflowerblue;
}
.box{
	width: 300px;
	overflow: hidden;
	border: 2px lightcoral solid;
}

<div class="box">
	<div class="float">
		这是一个float box
	</div>
	这是一个box
</div>

效果：
在这里插入图片描述
3、避免外边距（margin）合并
当div中有两个div，分别设置margin，拉开垂直距离，两个相邻的margin合并在一起。

.boxs{
	width: 300px;
	border: 2px lightcoral solid;
}
.box{
	margin: 10px 0;
	background: floralwhite;
}

<div class="boxs">
	<div class="box">这是一个div</div>
	<div class="box">这是一个div</div>
</div>

效果：
在这里插入图片描述
此时给其中一个box包裹一层div，并触发这个div生成一个BFC，就不合并了。

<div class="boxs">
	<div class="box">这是一个div</div>
	<div style="overflow: hidden">
		<div class="box">这是一个div</div>
	</div>
</div>

在这里插入图片描述
参考文章：
MDN-块格式化上下文
 BFC是什么
 理解CSS布局和BFC

苏无

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
理解BFC

框模型（Box Model）：在css中也叫作“盒模型”，是网页布局的基础，文档中的每一个元素都是一个矩形的盒子。框模型有多种类型，可以通过display来设定，最常见的类型有block，line，line-block。块格式化上下文（Block Formatting Context，BFC）：块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，。BFC中的元素布局不受外界影响...
复制链接

扫一扫