CSS的上下文之BFC

看到这个名词，可能会有些陌生，但其实上下文 = 区域，如果这么理解的话就会有行级上下文、块级上下文、flex上下文等等有一定排列规则的区域，我们今天只聊一聊块级格式化上下文（BFC）

一、什么是BFC？

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文（列举常见的方式）：

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display 为 inline-block、table-cells、flex
overflow 计算值不为 visible 的块元素

块格式化上下文包含创建它的元素内部的所有内容。

整理一下：

BFC属于普通的文档流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，它有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

二、BFC的特点以及应用

2.1 同一个BFC下，外边距会发生折叠

来看这样一段代码：

.box{width: 300px;
}
.child{margin: 100px;width: 100px;height: 100px;background: rgb(95, 172, 182);
}

<div class="box"><div class="child"></div><div class="child"></div>
</div>

现象：

明明两个child都存在100px的外边距，但他们实际间隔却不是200px，而是100px，这算是一种合并“规则”，当你发现你的页面因为加入了margin而出现了奇怪的问题，不妨往合并的方向思考

解释：

同一个BFC中，相邻的兄弟元素之间的相对的margin-bottom和margin-top会进行合并，并且显示的是较大值。

解决与注意：

想要解决这样的问题，我们可以通过将两个child放置于不同的BFC中，直接上图：

下图通过BFC解决了问题，是否产生了新的问题？是否可以通过其他方式解决呢？希望大家能灵活选择噢～

2.2 解决父子元素之间margin塌陷问题

来看这样一段代码：

body{background: #ccc;
}
.box{margin: 100px;width: 300px;height: 300px;background: rgb(149, 98, 98);
}
.child{margin: 50px;width: 100px;height: 100px;background: rgb(95, 172, 182);
}

<div class="box"><div class="child"></div>
</div>

现象：

box元素存在外边距100px，相对于body的效果生效了，毫无疑问；
child元素存在外边距50px，相对于box的效果仅左侧生效了，存在疑问；

解释：

有了2.1小节的经验，大家会猜测是不是margin再次发生了合并？也可以，但更合理的形容叫 “margin塌陷”。

父子相邻嵌套的元素在垂直方向的margin会发生塌陷，并取最大值。

拿例子中的box元素举例，box作为顶，子元素向外称起50px却失效了，可以理解为顶塌陷了。

如果子元素的margin-top = 200px 会发生什么呢？

解决与注意：

通过触发BFC，你可以解决当下的问题，但是请思考，子元素的是否需要margin来实现间距，给box元素添加padding会不会更好一些？

2.3 BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子：

.box{border: 1px solid black;
}
.child{width: 100px;height: 100px;background: #ddd;float: left;
}

<div class="box"><div class="child"></div>
</div>

现象：

child因为浮动，脱离了文档流；
box盒子的高度只计算了border；

解释：

因为子元素已经脱离了文档流，所以父元素在计算高度时忽略了它；

解决：

触发容器的 BFC，使得容器包裹着浮动元素。

2.4 BFC 解决文字环绕的问题

浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。

body {padding: 100px;
}
.box {border: 1px solid black;width: 300px;background: #ddd;
}
.left {width: 100px;height: 100px;float: left;background: rgb(81, 196, 204);
}

<div class="box"><div class="left"></div><div class="right">解决文字环绕的问题, 解决文字环绕的问题, 解决文字环绕的问题, 解决文字环绕的问题解决文字环绕的问题, 解决文字环绕的问题, 解决文字环绕的问题, 解决文字环绕的问题</div>
</div>

现象：

给左侧子元素设置了左浮动，使得文字环绕在它周围，但为什么文字会被环绕，而不是被遮挡？

解释：

看到float会脱离文档流，这是相对于盒子模型来说的。但它没有脱离文本流。

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的

元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

在MDN上提到，该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

解决

将包裹文字的元素置为BFC，看图：

问题解决了，新知识又增加了，例如自适应两栏布局，请看下图：

写在最后

《CSS基础系列》第四篇文章

如果对你有所帮助不妨给本项目的github 点个 star，这是对我最大的鼓励！

关于我

花名：余光
WX：j565017805
沉迷 JS，水平有限，虚心学习中

其他沉淀

Github: Js版LeetCode题解
前端进阶笔记
CSS 基础

CSS基础：CSS的上下文之BFC相关推荐

CSS基础——CSS样式的引入和规则【学习笔记】
1.引入CSS样式表(书写位置) 行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (1)行内式(内联样式) 概念: 称行内样式.行间样式. 是通过标签的style属性来设置 ...
CSS基础——CSS 三大特性【学习笔记】
1 CSS层叠性概念: 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉原则: 样式冲 ...
CSS基础——CSS复合选择器【学习笔记】
复合选择器后代选择器并集选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择 ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
CSS基础——CSS 背景(background)【学习笔记】
1 背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明的 2 背景图片(image) 语法: background-image : n ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
CSS基础标签属性及案例
CSS基础 CSS:cascading style sheets,层叠样式表格:CSS起到装饰作用,将不同功能的代码做分离,方便维护:可以大大提高工作效率,将HTML代码和样式代码分离: 1. 书写规 ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...

CSS基础：CSS的上下文之BFC

CSS的上下文之BFC

一、什么是BFC？

二、BFC的特点以及应用

2.1 同一个BFC下，外边距会发生折叠

2.2 解决父子元素之间margin塌陷问题

2.3 BFC 可以包含浮动的元素（清除浮动）

2.4 BFC 解决文字环绕的问题

写在最后

CSS基础：CSS的上下文之BFC相关推荐

最新文章

热门文章