CSS块格式化上下文(Block Formatting Context,BFC)

简介: CSS块格式化上下文(Block Formatting Context,BFC)

块格式化上下文(Block Formatting Context,BFC)
BFC: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
通俗的讲,BFC是一个独立的环境布局,可以理解为一个容器,在这个容器中按照一定的规则进行物品摆放,并且不会影响其他环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

BFC的创建条件
根元素:body
元素设置浮动:float除none以外的值
元素设置绝对定位:position设置为absolute或fixed
display设置为inline-block、table-cell、table-caption、flex等
overflow设置为hidden、auto、scroll
BFC的特点
垂直方向上,自上而下排列,和文档流的排列方式一致
在BFC中上下相邻的的两个容器的margin会重叠
计算BFC的高度时,需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器,容器内部元素不会影响外部元素
每个元素的margin-left值和容器的border-left相接处
BFC的作用
解决margin的重叠问题:由于BFC是一个独立的区域,内部的元素和外部的元素互不影响,将两个元素变为两个BFC,就解决了margin重叠的问题
解决高度塌陷的问题:对子元素设置浮动后,父元素会发生高度塌陷,即height变为0。只需将父元素变成一个BFC即可,常用的办法是给父元素设置overflow:hidden
创建自适应两栏布局:左边的宽度固定,右边的宽度自适应。左侧设置float:left,右侧设置overflow: hidden。这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现了自适应两栏布局

目录
相关文章
|
3月前
|
XML JSON 前端开发
json字符串CSS格式化
完成以上步骤后,你便能在网页中看到格式化后的JSON数据,它们将按照CSS定义的样式进行展示,使数据更易于阅读和理解。通过有效地结合JSON和CSS,你可以创建出更加丰富且易于交互的网页内容。
199 64
|
3月前
|
XML JSON 前端开发
json字符串CSS格式化
json字符串CSS格式化
61 4
|
5月前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
42 2
|
前端开发 容器
CSS:BFC(Block Formatting Context 块级格式化上下文)
CSS:BFC(Block Formatting Context 块级格式化上下文)
84 0
|
前端开发 容器
前端CSS理解 —— BFC(块级格式化上下文)
前端CSS理解 —— BFC(块级格式化上下文)
68 0
|
前端开发 容器
CSS: inline、block和inline-block的区别
CSS: inline、block和inline-block的区别
101 0
|
前端开发 搜索推荐
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
171 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
|
前端开发
【CSS】有意思的BFC:Block Formatting Context(块格式化上下文)!🤡
前言 大家好,我是HoMeTown,今天想聊一聊CSS中的BFC,很多朋友应该都听过这个名词,搞懂BFC可以让我们理解CSS中一些很诡异的地方,话不多说,直奔主题!
59 0
html+css实战12-文本格式化标签
html+css实战12-文本格式化标签
96 0
html+css实战12-文本格式化标签
|
前端开发 容器
Css规范整理:3.3、常规流布局:行内格式化上下文
行内级盒:参与行内格式化上下文的盒(outer = inner ) 行内盒:display = inline 的不可替换元素。 原子行内级盒:不属于行内盒的行内级盒。 行框(line box):包含来自同一行的盒的矩形区域叫做行框。(不是一个盒,没有padding border margin)
1620 0