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

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

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

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

纯css实现瀑布流(multi-column多列及flex布局)

瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了。纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流更符合我们常见的瀑布流

CSS自定义属性+CSS Grid网格实现超级的布局能力

我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

css两列布局之基于BFC规则实现

css要实现常见的自适应两列布局的方式方法挺多。这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC,可以搜搜看先,基本都讲的差不多了。等有更多空余时间,专门给讲讲BFC以及实例的东西。就这样吧,上代码:

height百分比失效_解决css中height:100%失效的问题

为了让网页内容更好的适应各类屏幕尺寸,一般都需要用到height:100%。但是会发现,height百分比失效并没有生效,这是什么原因造成的呢,以及我们需要如何解决呢?

仅用 3 个属性制作响应式 CSS 网格布局

如果我告诉你,你只需要知道 3 个 CSS 属性就可以制作一个完全响应式的 CSS 网格,如下所示:让我们从 HTML 布局开始。

flex布局基本语法

W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能

CSS五种方式实现 Footer 置底

页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

CSS三种布局模型是什么?

在网页中,元素有三种布局模型:流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)。下面我们来看一下这三种布局模型。

浮动,定位,flex布局

正常的布局流是将元素放置在浏览器视口内的系统:块级元素(display:block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。

移动端web自适应适配布局解决方案

100%还原设计图,要注意: 看布局,分析结构。感觉难点在于:1.测量精度(ps测量数据);2.文字的行高。自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度

点击更多...

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