BFC布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/102941685

BFC(block formatting context)
直译为“块级元素上下文”
BFC它是一个独立的渲染区域，只有block-level box 参与，它规定了内部block-level box如何布局，并且与这个区域外部毫不相干。（封闭的区域）

以下属性可以触发BFC
float属性不为none
position为absolute或fixed
display为inline-block，table-cell，table-caption，flex，inline-flex
overflow不为visible(overflow:hidden;经常用)

BFC元素所具有的属性

BFC布局规则特性
1.在BFC中，盒子从顶端开始垂直的一个接一个排列
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子margin会发生重叠（不同则不会发生重叠）（解决外边距合并）
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）（碰边缘不是压边缘）
4.BFC的区域不会与盒子产生交集，而是紧贴浮动边缘
5.计算BFC的高度时，自然也会检测浮动的盒子高度
它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干

BFC:页面上的一个隔离的独立容器；容器里面的子元素不会影响到外面的元素，反之也是如此。包括浮动、和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 300px;
				height: 500px;
				border: 1px solid red;
				/* overflow: hidden; 创建BFC*/
				float: left;    /* 给father创建BFC */
				/* position: absolute;   创建BFC */
				/* BFC算是清除浮动 */
			}
			.son1,.son2 {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			.over {
				overflow: hidden;   /* 防止合并 */
			}
			.son1 {
				margin-bottom:50px;
			}
			.son2 {
				background-color: purple;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="over">   <!-- over隔开那么son1就和son2就不是同一个BFC -->
			<div class="son1"></div>
			</div>
			<div class="son2"></div>
		</div>
	</body>
</html>

不产生交集


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father {
				width: 400px;
				height: 500px;
				border: 1px solid #000;
				margin: 0 auto;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				float: left;
				margin-top: 50px;
			}
			.txt {
				height: 300px;
				background-color: purple;
				overflow: hidden;   /* 给txt创建BFC区域不在和浮动产生交集 紧贴至浮动边缘*/
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box"></div>
			<div class="txt">
				11111111222222222
				11111111222222222
				1111111122222222211111111222222222
				11111111222222222
			</div>
		</div>
	</body>
</html>