BFC(块级格式化上下文)的详解

@逆风boy

已于 2024-03-07 10:44:37 修改

阅读量358

点赞数 11

分类专栏： css 文章标签： css css3 html

于 2024-03-07 10:42:09 首次发布

本文链接：https://blog.csdn.net/weixin_46820017/article/details/136525256

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

什么是BFC？

页面中的 -块渲染区域，并且有 — 套属于自己的渲染规则

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关
每个元素的左外边距与包含块的左边界相接触 (从左到右) ，即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然，BFC 的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件

触发 BFC 的条件包含不限于 :

根元素，即HTML元素
浮动元素： ft值为left 、 right
verflow值不为 visible , 为 auto 、 scroll 、 hidden
display的值为inline-block 、 inltable-cell 、 table-caption 、 table 、
inline-table 、 fex 、 inline- flex grid 、 inline-grid
position的值为absolute或fixed

应用场景

防止margin重叠 (塌陷)

	<style>
		p {
			color: #f55;
			background: #fcc;
			width: 200px;
			line-height: 100px;
			text-align:center;
			margin: 100px;
		}
	</style>
	<body>
		<p>Haha</p >
		<p>Hehe</p >
	</body>

清除内部浮动

	<style>
	.par {
		border: 5px solid #fcc;                       
		width: 300px;	
	}

	.child {		
		border: 5px solid #f66;
		width:100px;	
		height: 100px;
		float: left;
	}
</style>
	<body>   
		<div  class="par">
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</body>

自适应多栏布局

<style>
body{
	width: 300px;
	position: relative;
}

.aside {
	width: 100px;
	height: 150px;
	float: left;
	background: #f66;
}

.main {
	height: 200px;
	background: #fcc;
}
</style>
	<body>
		<div class="aside"></div>
		<div class="main"></div>
	</body>

可以通过触发 main 生成 BFC ，以此适应两栏布局

.main {
	height: 200px;
	background: #fcc;
}

@逆风boy

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
BFC(块级格式化上下文)的详解

页面中的 -块渲染区域，并且有 — 套属于自己的渲染规则内部的盒子会在垂直方向上一个接一个的放置对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关每个元素的左外边距与包含块的左边界相接触 (从左到右) ，即使浮动元素也是如此BFC的区域不会与float的元素区域重叠计算BFC的高度时，浮动子元素也参与计算。
复制链接

扫一扫