BFC的理解

最新推荐文章于 2022-09-16 10:56:07 发布

passion_wo

最新推荐文章于 2022-09-16 10:56:07 发布

阅读量241

点赞数

分类专栏： CSS HTML

@passion_wo

本文链接：https://blog.csdn.net/qq_38198897/article/details/112386976

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

BFC[Block Format Context]: 块级格式上下文

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

margin边距-塌陷

边距为正，取最大值
边距为负，取绝对值最大
边距一正一负，取和
原因: 在同一个BFC中，所以重叠
解决思路: 修改容器为单独的BFC

垂直方向塌陷

<style type="text/css">
	.top {
		width: 200px;
		height: 200px;
		background: black;
		margin: 20px;
	}
	.bottom {
		width: 100px;
		height: 100px;
		background: red;
		margin: 30px;
	}
</style>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>

例子中，两个盒子间距为30px。取间距最大值，发生重合。

解决方法：
1. 改变BFC环境: 嵌套一层，使不在同一个上下文环境中。
	`<div class="bottom-box"><div class="bottom"></div></div>`
	`.bottom-box{ position: absolute; }`
2. 修改display属性: `.bottom { display: inline-block; }`
3. 修改float属性: `.bottom { float: left; }`
- overflow 不可以解决此问题; 可以解决嵌套的塌陷.

嵌套塌陷

<style type="text/css">
	.box {
		width: 100%;
		height: 300px;
	}
	.top {
	float: left;
		width: 200px;
		height: 200px;
		background: black;
		margin: 20px;
	}
</style>
<body>
	<div class="box">
		<div class="top"></div>
	</div>
</body>

解决方法:
1. 外层盒子添加 overflow 非visible的属性
2. 添加 display: inline-block; (block不行)
3. 添加 float: left; 不为none都可以

水平方向塌陷

<style type="text/css">
	.box {
		width: 100%;
		height: 300px;
	}
	.top {
		float: left;
		width: 200px;
		height: 200px;
		background: black;
		margin: 20px;
	}
	.bottom {
		overflow: hidden; /** 这里添加 overflow 会导致边距重叠 */
		width: 100px;
		height: 100px;
		background: red;
		margin: 30px;
	}
</style>
<body>
	<div class="box">
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</body>

解决方式:
1. 删除overflow属性, 增加float: left;
2. 删除overflow属性, 增加display: inline-block;(inline-block使每个div变成单独的BFC)

水平方向塌陷 - 引申的自适应两栏布局

上面的例子中, overflow 导致边距重叠; 但是有清除浮动的作用.
但是会水平自适应两栏布局, 删除会导致两个box重叠覆盖(清除浮动)

passion_wo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录