BFC理解

nevermind 发布于2019-08-29 15:38 / 607人阅读

摘要：解决高度塌陷的前提就是能识别并包含到浮动元素。那有没有一个更好的高度检测方法呢答案是有的，就是我们经常用到的。不支持，所以需要通过专有的属性，触发。

Block formatting context （块级格式化上下文）

页面文档由块block构成每个block在页面上占据自己的位置
使用新的元素构建BFC overflow：hidden | auto | scroll；只要不为visible 新的空间
告诉浏览器，外面的环境影响不到我了我重新来进行Block formatting 布局和定位

核心：

新的BFC，给出了新的不受外界影响的块级格式化环境  
block 块级-> 页面的基础  
formatting context 格式化-> 渲染

浏览器构建文档树的时候布局和定位元素

网页的定位（大）文档流正常，浮动，定位，flex，table
广义的定位块级元素的定位垂直的定位；行内元素左右定位通过内容来确定
狭义的定位：
float 浮动元素，在一行的开始或者结束
flex 弹性布局
position

BFC 在正常的文档流里面重建一个新的上下文环境

BFC的约束规则

一、在浏览器进行页面元素布局的时候同一个BFC的两个相邻的Box的margin 会重叠，与方向无关

破坏规则 创建新的BFC Context上下文的概念

如何创建BFC？=>重新规划一个（独立）渲染区域

根元素body，天然是一个BFC

overflow:hidden;

float 不为none

display:inline-block | table-cell |table-caption

position:absolute | fixed 只要不为static

> 好像只剩块级元素和行内元素不是BFC

二、BFC的高度，浮动元素也要参与计算

在元素float 之后脱离了文档流没有办法计算确切高度，这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。而BFC就有这个特性，所以BFC也可以计算浮动元素的高度。新建BFC让浮动元素也参与计算

三、每个元素的左边，要与包含盒子的左边相接触

四、BFC的区域不会与float box重叠

/*BFC在三栏式布局中的应用*/
    


    
    
        
        Left
        Right
        Center

注意：

通过 overflow:hidden将元素转换为BFC，固然可以解决高度塌陷的问题，但是大范围的应用在布局上是肯定是行不通的，毕竟overflow会造成溢出隐藏的问题，特别是与JS交互的效果时。

那有没有一个更好的高度检测方法呢？
答案是有的，就是我们经常用到的clearfix。

.clearfix:after{
    content:"";
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/
}

关于zoom:1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113452.html

理解 CSS 布局和 BFC

摘要：布局中有一些概念，一旦你理解了它们，就能真正提高你的布局能力。我们通常有两种方法来解决这个布局问题。是布局中的一个迷你布局你可以将看作是页面内的一个迷你布局。理解浏览器如何布置网页是非常基础的。 CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么...

miya 2019-08-30 15:43 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

shixinzhang 2019-08-29 16:34 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

vspiders 2019-08-02 11:24 评论0 收藏0
JS每日一题: 如何理解CSS中BFC?

摘要：期如何理解中定义块格式化上下文，是页面的可视化渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 20190416期如何理解CSS中BFC? 定义: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC 特性及应用同一个...

lentoo 2019-08-23 16:58 评论0 收藏0
5分钟理解BFC原理

摘要：一概念即块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通俗一点来讲，可以把理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。一、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子...

Achilles 2019-08-02 10:58 评论0 收藏0
5分钟理解BFC原理

摘要：一概念即块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通俗一点来讲，可以把理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。一、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子...

tulayang 2019-08-30 15:54 评论0 收藏0