BFC

yanwei 发布于2019-08-30 11:25 / 3651人阅读

摘要：简称简称中只有和中还增加了和定义直译为块级格式化上下文。它是一个独立的渲染区域，只有参与，它规定了内部的如何布局，并且与这个区域外部毫不相干。

BFC

Block fomatting context (简称BFC)
Inline formatting context (简称IFC)
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC

BFC 定义：
BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

这些元素会触发BFC:（子元素有浮动直接在父元素上添加一下内容即可）
1、根元素 -- HTML元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex，
5、overflow不为visible
6、flow-root 意为：触发BFC 兼容不太好 css新加的

BFC功能：
1、让BFC内部元素被包起来
2、让两个相邻元素界限分明

应用场景

BFC 使用场景
面试。。。。剩下时间避免使用
不要用BFC清除浮动（BFC清除有副作用用clear：both 或者 display：flow-root ）

 //BFC可以包住浮动元素
    
    .father{}
    .child{
        height:100px;
        background:rgba(0,255,0,1);
        margin-top:100px;
    }
    
    //这个父级的高度是从子级开始的 ！！！
    //除非触发BFC（加overflow：hidden）父级高度才会从顶部计算

    // 用flow + div 做左右布局
    .father{
        width:100px;
        min-height:600px;
        border:3px solid red;
        float:left;
        margin-right:20px;
    }
    .child{
        min-height:600px;
        border:5px solid green;
        overflow:auto; // display:flow-root
        //如果没有这个BFC 就会跟这个浮动元素不清不楚 想让这两个分隔
    }

BFC 和文档流

文档流影响的是这个元素的排列顺序
BFC 影响的是这个元素的宽高

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

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

CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

岳光 2019-08-30 15:55 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

chanthuang 2019-08-02 14:09 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
# 是的，是你的BFC - CSS中常用

摘要：根据布局规则第四条的区域不会与重叠。因此会根据包含块的宽度，和的宽度，自动变窄。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 CFC 全称：(Block Formatting Contexts)含义是块级格式化上下文)，就是一个块级元素的渲染显示规则一、简易理解.定义可以把 BF...

Cruise_Chan 2019-08-02 16:17 评论0 收藏0