快速理解什么是BFC

最新推荐文章于 2021-11-15 22:44:36 发布

爱吃蟹黄堡的蟹老板

最新推荐文章于 2021-11-15 22:44:36 发布

阅读量139

点赞数 1

分类专栏： HTML_CSS 文章标签： BFC

本文链接：https://blog.csdn.net/weixin_42362211/article/details/102749917

版权

HTML_CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BFC（Block Formating Context）

什么是BFC

BFC (Block Formatting Context) 块级格式化上下文，是用于布局块级盒子的一块渲染区域，相对应的还有 IFC（Inline Formatting Context）内联格式化上下文，不是本文重点，读者可以自行查阅相关知识。

BFC 是 Web 页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

— MDN - 块格式化上下文

一个 BFC 的范围包含创建该上下文元素的所有子元素，但不包括创建了新 BFC 的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个 BFC 中。因为如果一个元素能够同时处于两个 BFC 中，那么就意味着这个元素能与两个 BFC 中的元素发生作用，就违反了 BFC 的隔离作用。

BFC的触发条件

根元素，即 HTML 标签;
浮动元素，即 float 值为 left、right;
overflow 值不为 visible，即值为 auto、scroll、hidden；
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid；
定位元素：position 值为 absolute、fixed；
contain 为 layout、content、paint 的元素

BFC的作用

清除内部浮动

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
.q{
	/*触发BFC清除内部浮动，防止，让父级盒子能包裹到内部的子盒子*/
	overflow: hidden;
	width: 500px;
	background-color: black;
}
.e,
.w{
	background-color: red;
	height: 200px;
	width: 200px;
	float: left;
}
</style>
 
<body>
	<div class="q">
		<div class="w"></div>
		<div class="e"></div>
	</div>
</body>
 
</html>

防止垂直margin重叠

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>

.q{
	height: 100px;
	width: 100px;
	background-color: blue;
	text-align: center;
	line-height: 100px;
	margin: 20px;
}
.w{
	overflow: hidden;
}
</style>
 
<body>
	<!-- 在p标签外部包裹上一个div，然后在div上加上触发BFC -->
<div class="w">
	<p class="q">你好</p>
</div>
<p class="q">我不好</p>

</body>
</html>