关闭

什么是BFC布局——浅析BFC布局的概念以及作用

时间: 2018-08-06阅读: 1505标签: 布局

BFC的定义:

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

我们常说的文档流其实分为==定位流、浮动流和普通流==三种。而普通流其实就是指BFC中的FC。 FC是formatting 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 class="parent">
    <div class="child"></div>
    //给这两个子div加浮动,浮动的结果,如果没有清除浮动的话,父div不会将下面两个div包裹,但还是在父div的范围之内。
    <div class="child"></div>
</div>

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


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

<div></div>
<div>
    <div></div>
</div>
<!--下面是css代码-->
 .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重叠

<div></div>
<div>
    <div></div>
</div>
<!--下面是css代码-->
 .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属性。
}




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/982

关于display:flex碰上white-space nowrap 影响布局的问题

背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

移动端布局方案,简单高效,完美适配各种机型

rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小,第二步:使用postcss-px2rem-exclude将px转换为rem

css之定位

定位是css当中一种操作html元素布局的方案;属性position:static:默认值,无特殊定位,对象遵循HTML原则;absolute:绝对定位,将对象从文档流中完全拖离出来;fixed:类似于绝对定位的方式.

底部粘连(stiky footer)布局

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

css Grid布局

Gird布局是什么?Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器

css有几种常见布局?

css有几种常见布局?下面本篇文章就来给大家介绍5中常见布局方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!