什么是BFC

BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文。它是一个独立渲染的区域,规定了内部如何布局,同时不受外界的影响。我们的根元素本身就是一个BFC


BFC的特性

BFC的特性有很多,但是这里主要说到四点,也是我们常用的。

  1. BFC内部的margin会发生折叠,即是我们常说的margin collasping。

  2. BFC内部的浮动元素也参与高度计算,我们常利用此点解决高度塌陷的问题。

  3. BFC的区域不会与float box重叠,我们可以利用这点来做到自适应两栏布局。

  4. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。


怎么生成一个BFC

  1. 根元素。因为根元素本身就是一个BFC

  2. 设置float属性

  3. positionabsolute或者fixed

  4. overflow不为visible,一般而言我们都是设为hidden

  5. display为inline-block, table-cell, table-caption, flex, inline-flex


BFC的用处或者解释

1. 边距折叠问题

前面我们说过,根元素本身就是一个BFC,所以我们经常提到的边距折叠,即是垂直方向上margin不会相加,而是选择较大的一个值作为margin,就像这个例子

<div style="width:200px;height: 200px;background-color: red;margin-bottom: 10px;"></div>
<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;"></div>
看到上面的结果我十分感动啊,实在是没想到markdown真的能直接编译代码,那这样我以后还截个毛图,有代码直接在这里做实验行了。

说回正题,这里我们的上下边距是20px的而不是20+10=30px。这就是因为我们上文提到的BFC内部的正常块级元素(注意是正常)会发生垂直边距折叠。但是有时候我们不需要这种边距折叠,有没有什么办法去掉吗?这就需要用到我们上面提过的另一个特性

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

意思很明确了,所以我们要想避免这种折叠那么我们就可以新建一个BFC,也就是这样

<div style="overflow: hidden">
<div style="width:200px;height: 200px;background-color: red;margin-bottom: 10px;overflow:hidden"></div>
</div>
<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;overflow:hidden"></div>

由于外部的盒子设了overflow:hidden,所以这个时候新建了一个BFC,而因为BFC里外是不能互相影响的,所以margin就无法折叠。

2.解决高度塌陷

<style>
.par {
border: 5px solid #fcc;
width: 300px;
} .child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>

.par {
border: 5px solid #fcc;
width: 300px;

}

.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}

从效果中我们可以看出,父盒子此时并没有高度,因为正常情况下就算高度是不会把浮动元素也算进去的,但是很多时候我们为了达到高度自适应,不能手动给父元素定高而是应该让子元素撑起来,所以面对这种情况我们就可以用到BFC的这一特性

BFC内部的浮动元素也参与高度计算,我们常利用此点解决高度塌陷的问题。

所以这里我们只需要给父元素加一个overflow:hidden使父元素变成BFC便可。

3.两栏自适应布局

<style>
.wrap{
width: 800px;
height:200px;
} .aside {
width: 300px;
height: 150px;
float: left;
background: #f66;
} .main {
height: 200px;
background: #fcc;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>

.wrap{
width: 800px;
height:200px;

}

.aside {
width: 300px;
height: 150px;
float: left;
background: #f66;

}

.main {
height: 200px;
background: #fcc;

}

对于这段代码出来的效果应该没什么问题,我们把aside浮动了,而main的宽度随着wrap变化,所以此时aside浮在main上面。

BFC的区域不会与float box重叠,我们可以利用这点来做到自适应两栏布局。

我们利用这个特点,把我们的main元素变成BFC,这样它就不会与我们的浮动元素进行重叠,然后我们便实现了一个两栏自适应布局的效果。

<style>
.wrap{
width: 800px;
height:200px;
} .aside {
width: 300px;
height: 150px;
float: left;
background: #f66;
} .main {
height: 200px;
background: #fcc;
}
.main{
overflow:hidden;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>

当然,对于两栏自适应布局,除了采用BFC之外,我之前还写过一篇文章说过两栏自适应布局,那种方式就做圣杯布局的方法。

浅谈BFC与应用的更多相关文章

  1. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  2. 浅谈BFC

    Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Fo ...

  3. 浅谈BFC的理解

    在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...

  4. 浅谈BFC和IFC

    先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...

  5. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

  6. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  7. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  8. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  9. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

随机推荐

  1. BZOJ 1652: [Usaco2006 Feb]Treats for the Cows

    题目 1652: [Usaco2006 Feb]Treats for the Cows Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 234  Solve ...

  2. Loadrunner 运行场景时:missing newline in XXX.dat 错误解决

    脚本参数化类型为file,在controller里运行场景的时候,报了个missing newline的错误,查了一下,将参数化的dat文件中的最后一行补上一个空行就解决啦!! 如果遇到此错误,需检查 ...

  3. BZOJ 3391: [Usaco2004 Dec]Tree Cutting网络破坏( dfs )

    因为是棵树 , 所以直接 dfs 就好了... ---------------------------------------------------------------------------- ...

  4. BZOJ 2654: tree( 二分 + MST )

    我们给白色的边增加权值 , 则选到的白色边就会变多 , 因此可以二分一下. 不过这道题有点小坑... ------------------------------------------------- ...

  5. javascript 学习随笔

    var carname="Volvo"; var carname; 重新声明变量后变量的值不变,在这里还是volvo var carname="Volvo"; ...

  6. Verilog中的标点

    在Verilog中有时候会误用的上引号 1,define 中的 `define INITIAL  0 这个单引号用的是键盘左上角的那个单引号,其实就是一个小撇. 2,4'd0 这个 用的是才是叫真正的 ...

  7. ASP.NET MVC进阶之路:深入理解Controller激活机制并使用Ioc容器创建对象

    本文标题说是"深入理解Controller"其实有点“标题党”的味道了.本篇只会探讨"Controller"的激活机制,也就是如何创建Controller的并调 ...

  8. 如何用vs查看结构体布局

    今天遇到一个问题: 假设在每个系统的structA 结构不同,我们在windbg看了以后直接拿来用,自己定义成结构体,如何来验证这个结构体内存布局是否和windbg一致. 当然笨办法是自己一个个成员数 ...

  9. php 解析url 和parse_url使用

    通过url进行传值,是php中一个传值的重要手段.所以我们要经常对url里面所带的参数进行解析,如果我们知道了url传递参数名称,例如 /index.php?name=tank&sex=1#t ...

  10. 基于visual Studio2013解决C语言竞赛题之0505选数

     题目