浅谈BFC与应用
什么是BFC
BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文。它是一个独立渲染的区域,规定了内部如何布局,同时不受外界的影响。我们的根元素本身就是一个BFC
BFC的特性
BFC的特性有很多,但是这里主要说到四点,也是我们常用的。
BFC内部的margin会发生折叠,即是我们常说的margin collasping。
BFC内部的浮动元素也参与高度计算,我们常利用此点解决高度塌陷的问题。
BFC的区域不会与float box重叠,我们可以利用这点来做到自适应两栏布局。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
怎么生成一个BFC
根元素。因为根元素本身就是一个BFC
设置
float
属性position
为absolute
或者fixed
overflow
不为visible
,一般而言我们都是设为hidden
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与应用的更多相关文章
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- 浅谈BFC
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Fo ...
- 浅谈BFC的理解
在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- BFC 浅谈
写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
随机推荐
- 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 ...
- Loadrunner 运行场景时:missing newline in XXX.dat 错误解决
脚本参数化类型为file,在controller里运行场景的时候,报了个missing newline的错误,查了一下,将参数化的dat文件中的最后一行补上一个空行就解决啦!! 如果遇到此错误,需检查 ...
- BZOJ 3391: [Usaco2004 Dec]Tree Cutting网络破坏( dfs )
因为是棵树 , 所以直接 dfs 就好了... ---------------------------------------------------------------------------- ...
- BZOJ 2654: tree( 二分 + MST )
我们给白色的边增加权值 , 则选到的白色边就会变多 , 因此可以二分一下. 不过这道题有点小坑... ------------------------------------------------- ...
- javascript 学习随笔
var carname="Volvo"; var carname; 重新声明变量后变量的值不变,在这里还是volvo var carname="Volvo"; ...
- Verilog中的标点
在Verilog中有时候会误用的上引号 1,define 中的 `define INITIAL 0 这个单引号用的是键盘左上角的那个单引号,其实就是一个小撇. 2,4'd0 这个 用的是才是叫真正的 ...
- ASP.NET MVC进阶之路:深入理解Controller激活机制并使用Ioc容器创建对象
本文标题说是"深入理解Controller"其实有点“标题党”的味道了.本篇只会探讨"Controller"的激活机制,也就是如何创建Controller的并调 ...
- 如何用vs查看结构体布局
今天遇到一个问题: 假设在每个系统的structA 结构不同,我们在windbg看了以后直接拿来用,自己定义成结构体,如何来验证这个结构体内存布局是否和windbg一致. 当然笨办法是自己一个个成员数 ...
- php 解析url 和parse_url使用
通过url进行传值,是php中一个传值的重要手段.所以我们要经常对url里面所带的参数进行解析,如果我们知道了url传递参数名称,例如 /index.php?name=tank&sex=1#t ...
- 基于visual Studio2013解决C语言竞赛题之0505选数
题目