资讯专栏INFORMATION COLUMN

浅析BFC布局的概念以及作用

荆兆峰 / 1756人阅读

摘要:的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

BFC的概念以及作用

BFC的定义:

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

我们常说的文档流其实分为==定位流、浮动流和普通流==三种。而普通流其实就是指BFC中的FC。
FCformatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

通俗一点的方式解释:

BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC。

BFC的触发条件

==满足下列条件之一就可触发BFC==

  • 【1】根元素,即HTML元素
  • 【2】float的值不为none
  • 【3】overflow的值不为visible
  • 【4】display的值为inline-block、table-cell、table-caption
  • 【5】position的值为absolute或fixed

    BFC布局规则:

    • 1.内部的Box会在垂直方向,一个接一个地放置。
  • 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • 4.BFC的区域不会与float box重叠。
  • 5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 6.计算BFC的高度时,浮动元素也参与计算

BFC布局规则1:内部的Box会在垂直方向,一个接一个地放置。

我们平常说的盒子是由margin、border、padding、content组成的,实际上每种类型的四条边定义了一个盒子,分别是分别是content box、padding box、border box、margin box,这四种类型的盒子一直存在,即使他们的值为0.决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。

BFC布局规则2:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box

BFC布局规则3:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

//给这两个子div加浮动,浮动的结果,如果没有清除浮动的话,父div不会将下面两个div包裹,但还是在父div的范围之内。

解析:给这两个子div加浮动,浮动的结果,如果没有清除浮动的话,父div不会将下面两个div包裹,但还是在父div的范围之内,左浮是子div的左边接触父div的borderbox的左边,右浮是子div接触父div的borderbox右边,除非设置margin来撑开距离,否则一直是这个规则。

BFC布局规则4:BFC的区域不会与float box重叠:

.aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; overflow: hidden;//触发main盒子的BFC background: #fcc; } .text{ width: 500px; }

上面aside盒子有一个浮动属性,覆盖了main盒子的内容,main盒子没有清除aside盒子的浮动。只做了一个动作,就是触发自身的BFC,然后就不再被aside盒子覆盖了。所以:BFC的区域不会与float box重叠。

BFC有哪些作用:

  • 1.自适应两栏布局
  • 2.可以阻止元素被浮动元素覆盖
  • 3.可以包含浮动元素——清除内部浮动
  • 4.分属于不同的BFC时可以阻止margin重叠

    BFC作用1:自适应两栏布局

    还是上面的代码,此时BFC的区域不会与float box重叠,因此会根据包含块(父div)的宽度,和aside的宽度,自适应宽度。

    BFC 与 Layout

    IE 作为浏览器中的奇葩,当然不可能按部就班的支持 BFC 标准,于是乎 IE 中有了 Layout 这个东西。Layout 和 BFC 基本是等价的,为了处理 IE 的兼容性,在需要触发 BFC 时,我们除了需要用触发条件中的 CSS 属性来触发 BFC,还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout。

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC作用3:可以包含浮动元素——清除内部浮动

给父divparent加上 overflow: hidden;
清除浮动原理:触发父div的BFC属性,使下面的子div都处在父div的同一个BFC区域之内,此时已成功清除浮动.
还可以向同一个方向浮动来达到清除浮动的目的,清除浮动的原理是两个div都位于同一个浮动的BFC区域之中

BFC的作用4:阻止margin重叠:

当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
操作方法:给其中一个div外面包一个div,然后通过触发外面这个div的BFC,就可以阻止这两个div的margin重叠
.aside { margin-bottom: 100px;//margin属性 width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px;//margin属性 height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/ overflow: hidden;//此时已经触发了BFC属性。 }

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

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

相关文章

  • BFC与自适应浅析

    摘要:最常见的有简称和简称。的区域不会与重叠。也就是说只要父容器形成就可以,触发方式见上清除浮动比较好的方法以上用,用更好的方法自适应布局触发自适应属性对比参考资料张鑫旭老师的博客 本文是从之前的csdn上的乱七八糟的笔记整理过来的 概念   Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何...

    makeFoxPlay 评论0 收藏0
  • 浅析BFC

    摘要:原文链接说起其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理 原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

    voyagelab 评论0 收藏0
  • 浅析BFC

    摘要:原文链接说起其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理 原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

    My_Oh_My 评论0 收藏0
  • 一篇文章带拿下盒模型BFC渲染机制

    摘要:它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。一个的范围包含创建该上下文元素的所有子元素,但不包括创建了新的子元素的内部元素。 走在前端的大道上 本篇将自己读过的相关 盒模型BFC 文章中,对自己有启发的章节片段总结在这(会对原文进行删改),会不断丰富提炼总结更新。 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的...

    DangoSky 评论0 收藏0
  • BFC原理详解

    摘要:最常见的有简称和简称。可以把它理解成是一个独立的容器,并且这个容器的里的布局,与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局 一.BFC是什么 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 1.BOX:CSS布局的基本单位 Box是CSS布局的...

    ziwenxie 评论0 收藏0

发表评论

0条评论

荆兆峰

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<