块级格式化上下文（BFC）-CSDN博客

本文链接：https://blog.csdn.net/I_love_latiao/article/details/107917864

块级格式化上下文（BFC）

全称Block Formatting Context，简称BFC

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局（可用于解决margin塌陷问题）

以下元素会创建BFC：

1.根元素（<html>及其他）

2.浮动和绝对定位元素

3.overflow不等于visible的块盒

具体规则：

1.创建BFC的元素，他的自动高度需要计算浮动元素

2.创建BFC的元素，他的边框盒不会与浮动元素重叠

3.创建BFC的元素，不会和它的子元素进行外边距合并

如何触发一个盒子的BFC：

1.position：absolute；

2.display：inline-block；

3.float：left/right

4.overflow：hidden；（溢出盒子部分隐藏展示)


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="经典bug.css">
</head>
<body>
<!-- margin塌陷 -->
 <div class="wrapper">
 	<div class="content"></div>
 </div>
</body>
</html>

-----css

*{
    margin:0;
	padding: 0;
}
/*margin塌陷*/
.wrapper{
	margin-left: 100px;
	margin-top: 100px;
	width: 100px;
	height: 100px;
	background-color:  black;
	//方法
 //  1.
     overflow: hidden;
 //  2.display: inline-block;
 //  3.position: absolute;
}
.content{
	margin-left: 50px;
	margin-top: 50px;
	width: 50px;
	height: 50px;
	background-color: green;

}