认识BFC_bfc容器-CSDN博客

本文链接：https://blog.csdn.net/weixin_43929122/article/details/140893475

一、何为BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
5、根元素

三、BFC的特性

1.内部的Box会在垂直方向上一个接一个的放置。

示例：

		<p>内部的Box会在垂直方向上一个接一个的放置</p>
		<div class="container bfc">
			<div class="child">1</div>
			<div class="child">2</div>
		</div>
		<br />

效果：

2.垂直方向上的距离由margin决定

margin-top塌陷 : 给子元素添加margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。

代码：

		<p>垂直方向上的距离由margin决定</p>
		<p>解决子级元素外边距会使父级元素塌陷的问题</p>
		<div class="border_top">
			<div class="container">
				<div class="child" style="margin-top: 50px">1</div>
			</div>
		</div>
		<br />
		<div class="border_top">
			<div class="container bfc">
				<div class="child" style="margin-top: 50px">1</div>
			</div>
		</div>
		<br />

效果：

3.bfc的区域不会与float的元素区域重叠

代码：

		<p>bfc的区域不会与float的元素区域重叠</p>
		<div>
			<div class="child float_left">1</div>
			<div class="container bfc">
				<div class="child_big">2</div>
			</div>
		</div>
		<br />

效果：

4.计算bfc的高度时，浮动元素也参与计算

浮动元素脱离文档流，导致无法给父元素撑出高度。

代码：

		<p>计算bfc的高度时，浮动元素也参与计算</p>
		<p>解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题</p>
		<div class="container bfc">
			<div class="child_big float_left">1</div>
			<div class="child">2</div>
		</div>
		<br />

效果：

5.避免外边距margin重叠

外边距重叠现象 ：兄弟之间的元素，垂直方向的margin-bottom和margin-top会合并为单个边距，其大小为单个边距的最大值，如果值一样则值仅为其中一个。

代码：

		<p>避免外边距margin重叠</p>
		<div class="container">
			<div class="child margin_bottom">1</div>
			<div class="child margin_top">2</div>
		</div>
		<br />
		<div class="container bfc">
			<div class="child margin_bottom">1</div>
		</div>
		<div class="container bfc">
			<div class="child margin_top">2</div>
		</div>
		<br />

效果：

四、完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.border_top {
				border-top: 1px solid gray;
			}
			.container {
				background-color: rgba(250, 235, 215, 0.435);
			}
			.bfc {
				overflow: hidden;
			}
			.child,
			.child_big {
				text-align: center;
				font-size: 20px;
				font-weight: bold;
			}
			.child {
				width: 200px;
				height: 200px;
				line-height: 200px;
				background-color: antiquewhite;
				border: 1px solid rgb(122, 225, 136);
			}
			.child_big {
				width: 500px;
				height: 500px;
				line-height: 500px;
				background-color: rgba(250, 235, 215, 0.353);
				border: 1px solid rgb(122, 225, 136);
			}
			.float_left {
				float: left;
			}
			.margin_bottom {
				margin-bottom: 50px;
			}
			.margin_top {
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<p>内部的Box会在垂直方向上一个接一个的放置</p>
		<div class="container bfc">
			<div class="child">1</div>
			<div class="child">2</div>
		</div>
		<br />

		<p>计算bfc的高度时，浮动元素也参与计算</p>
		<p>解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题</p>
		<div class="container bfc">
			<div class="child_big float_left">1</div>
			<div class="child">2</div>
		</div>
		<br />

		<p>bfc的区域不会与float的元素区域重叠</p>
		<div>
			<div class="child float_left">1</div>
			<div class="container bfc">
				<div class="child_big">2</div>
			</div>
		</div>
		<br />

		<p>垂直方向上的距离由margin决定</p>
		<p>解决子级元素外边距会使父级元素塌陷的问题</p>
		<div class="border_top">
			<div class="container">
				<div class="child" style="margin-top: 50px">1</div>
			</div>
		</div>
		<br />
		<div class="border_top">
			<div class="container bfc">
				<div class="child" style="margin-top: 50px">1</div>
			</div>
		</div>
		<br />

		<p>避免外边距margin重叠</p>
		<div class="container">
			<div class="child margin_bottom">1</div>
			<div class="child margin_top">2</div>
		</div>
		<br />
		<div class="container bfc">
			<div class="child margin_bottom">1</div>
		</div>
		<div class="container bfc">
			<div class="child margin_top">2</div>
		</div>
		<br />
	</body>
</html>