简单理解css的BFC模式

最新推荐文章于 2023-02-25 11:53:52 发布

河南菜鸟

最新推荐文章于 2023-02-25 11:53:52 发布

阅读量451

点赞数

分类专栏： CSS HTML 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_42824963/article/details/123899347

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

css 的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）；

BFC模式的用途：
1.正常的左右布局或清除浮动

<div class="box1">
	<div class="left"></div>
	<div class="right"></div>
</div>

	.box1 {
		box-shadow: 2px 9px 54px #888888;
	}
  .left {
		width: 100px;
		background: red;
		height: 200px;
		float: left;
		margin-top: 30px;
	}

	.right {
		height: 10000px;
		background: beige;
		overflow: hidden; //开启BFC模式
	}

2.当子元素设置margin会带动父元素的高度塌陷可以用BFC模式解决此类问题

<div class="box1">
	<div class="left"></div>
</div>

.box1 {
		box-shadow: 2px 9px 54px #888888;
		overflow:hidden; // 开启BFC模式
	}
  .left {
		width: 100px;
		background: red;
		height: 200px;
		float: left;
		margin-top: 30px;
	}

3.元素之间margin重叠可以用BFC模式解决

<div class="box1">
	<p class="left"></p>
	<div class="warpper"><p class="right"></p></div>
</div>

.box1 {
margin-top: 20px;
	box-shadow: 2px 9px 54px #888888;
}
.box1 p {
	margin: 20px;
}
 .left {
	width: 100px;
	background: red;
	height: 200px;
	margin-top: 30px;
}
 .warpper {
	
	overflow: hidden;
}
.right {
	height: 10000px;
	background: beige;
}