BFC(块级格式化上下文)

BFC（Block formatting context）

直译为“块级格式化上下文”。

（1）元素的显示模式

我们之前学过元素的显示模式：display。

分为块级元素、行内元素、行内块元素。其实，display还有很多值

block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。
inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context

BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（2）哪些元素会生成BFC

以上盒子具有BFC的条件了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

根元素 html
浮动元素(元素的float不是none)
绝对定位元素(元素的position为absolute或fixed)
display为inline-block、table-cell、table、inline-table、flex、grid或inline-grid
overflow值不为visible的块元素
多列容器(元素的column-count或column-width不为auto，包括column-count为1)

（3）BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块的左边缘相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- 在一个bfc中，每一个盒子的左外边距应该和包含块的左边接触。这句话有两个地方值得注意
  
  第一、 bfc中的盒子应该与其自身的包含块相接触，而非与bfc盒子相接触，这个包含块有可能是bfc中的一部分，也有可能和bfc无关。
  
  第二、bfc中的盒子是与其包含块的 left edge 相接触，而不是包含块的left-border相接触。因为包含块并非一个完整的盒子，不可能有left-border。 left edge 正确的翻译为左边缘。
- 第二句翻译：即使存在浮动盒子也应该如此（如此的意思就是布局应该按照上述的规则进行），除非子盒子又形成了一个新的bfc。
  
  这句话正确的理解方式为，一个bfc中，如果存在一个浮动的盒子，而其他盒子并没有形成新的bfc，那么所有的子盒子都应该触碰到其包含块的左边缘。举个例子，一个父盒子使用overflow:hidden形成bfc，其中有个子盒子，一个浮动，另一个不浮动。那么浮动盒子会盖住不浮动盒子，但是两个盒子都会触碰到bfc的content-box。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

（4）BFC的主要用途

1. 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式。

计算BFC的高度时，自然也会检测浮动盒子的高度

<style>.fa {width: 400px;/* height: 400px; */border: 1px solid;/* overflow: scroll; *//* float: right; *//* display: inline-block; *//* display: table-cell; *//* position: fixed; */position: absolute;}
.fa div {background-color: red;width: 100px;height: 100px;float: left;}
</style>

<div class="fa"><div class="son1"></div><div class="son2"></div>
</div>

2. 解决外边合并问题

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。

<div class="container"><div class="son1"></div>
</div>
<div class="container"><div class="son2"></div>
</div>

<style>.son1, .son2 {width: 300px;height: 300px;}.son1 {border: 2px solid red;margin-bottom: 50px;}.son2 {border: 2px solid green;margin-top: 50px;}.container {/* display: table; *//* overflow: hidden; *//* overflow: auto; *//* overflow: scroll; *//* position: absolute; */float: left;}
</style>

3.阻止元素被浮动元素覆盖

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。

<div class="fa"><div class="div1"></div>
</div>
<div class="div2"></div>

<style>div {width: 200px;height: 200px;}.div1 {background-color: blue;float: left;}.div2 {width: 240px;background-color: yellow;}.fa {/* display: inline-block; *//* display: table-cell; *//* display: table; *//* display: flex; */overflow: hidden;}
</style>

BFC(块级格式化上下文)相关推荐

css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
html浮动代码_清除浮动与 BFC(块级格式化上下文)
BFC(Block Formatting Context)是在解决清除浮动的问题时遇到的. 一.什么是 BFC MDN: 块格式化上下文(Block Formatting Context,BFC) 是 ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
BFC（块级格式化上下文）【面试】
BFC(块级格式化上下文) 块级格式化上下⽂,是⼀个独⽴的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. IE下为 Layout ,可通过 zoom:1 触 ...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. ...
块级格式化上下文（Block Formatting Context）
前言在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
常规流之块级格式化上下文（Block Formatting Contexts）
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...
一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...

BFC(块级格式化上下文)

BFC(块级格式化上下文)

（1）元素的显示模式

（2）哪些元素会生成BFC

（3）BFC布局规则

（4）BFC的主要用途

1. 清除元素内部浮动

2. 解决外边合并问题

3.阻止元素被浮动元素覆盖

BFC(块级格式化上下文)相关推荐

最新文章

热门文章