记录一下前端的BFC

最新推荐文章于 2024-07-14 16:43:41 发布

沉默寡言的绅士

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量122

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_45178215/article/details/121034129

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端的BFC是什么

概念
触发BFC
特性和举两个应用
总结

概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC

满足以下条件即可触发BFC特性：

body 根元素
display 为 inline-block、table-cells、flex
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
overflow 除了 visible 以外的值 (hidden、auto、scroll)

特性和举两个应用

在body元素下，margin属性会合并

css:
div {
	width: 100px;
	height: 100px;
	background: rgb(0,102,255);
	margin: 50px;
}
<body>
	<div></div>
	<div></div>
</body>

页面实际展示两个div的间隔只有50px,而不是100px
解决：让两个元素处于不同的容器

<body>
	<div class="bfc-contains">
	  <p>这里的margin就不会被合并</p>
	</div>
	<div class="bfc-contains">
	  <p>这里的margin就不会被合并</p>
	</div>
</body>

BFC 可以包含浮动的元素

<div style="border: 1px solid #000;">
    <div style="width: 50px;height: 50px;background: #f5f5f5;float: left;"></div>
</div>

在这里插入图片描述

内容元素浮动，则会出现此效果
解决：加入BFC的特性overflow: hidden，则可消除浮动

<div style="border: 1px solid #000;overflow: hidden;">
    <div style="width: 50px;height: 50px;background: #f5f5f5;float: left;"></div>
</div>

在这里插入图片描述

总结

了解下BFC规范原理，有助于更好使用前端定位方案

沉默寡言的绅士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下前端的BFC

前端的BFC是什么概念触发BFC特性和举两个应用总结概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器
复制链接

扫一扫