BFC之浅析篇
BFC是什么呢？
掏粪男孩？
当然不是咯。BFC，英文名Block formatting context，直译为“块级格式化上下文”。它是W3C CSS 2.1规范中的一个概念，决定了元素如何对内容进行定位，以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。
|
BFC(参考W3C) |
|
|
特性 |
进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。 总之，BFC与外部元素互不影响 |
|
触发BFC的方法 |
1、 根元素 2、 float属性不为none 3、 position为absolute或fixed 4、 overflow的值不为visible 5、 display的值为table-cell，table-caption，inline-block中的任何一个。 |
谈了半天，你可能会问，咦，葛葛，那使元素成为BFC到底有么子用呢？
这就得，从它的特性入手，特别是我加粗的部分，可以知道，BFC元素可以防止与浮动元素重叠嘛。
恩？什么意思。看看下面的demo
<!DOCTYPE html>
<head>
<title>BFC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.leftDiv {
width:100px;
height:100px;
background:green;
float:left;
}
.normalDiv {
height:100px;
background:pink;
}
</style>
</head>
<body>
<div class="leftDiv"></div>
<div class="normalDiv"></div>
</body>
</html>
运行代码，打开chrome调试器，点击normalDiv元素，可以看到，normalDiv有一部分被floatDiv挡住了，即它们发生了重叠。
那么我们触发normalDiv为BFC呢。例如设置它的属性overflow为hidden，我们运行代码，再看看结果。
<!DOCTYPE html>
<head>
<title>BFC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.leftDiv {
width:100px;
height:100px;
background:green;
float:left;
}
.normalDiv {
height:100px;
background:pink;
/*添加overflow:hidden*/
overflow:hidden;
}
</style>
</head>
<body>
<div class="leftDiv"></div>
<div class="normalDiv"></div>
</body>
</html>
从运行结果可以看出，当我们触发normalDiv为BFC后，它与floatDiv就没有发生重叠啦。
好吧，咦，我也知道BFC的确可以防止与浮动元素重叠，那有什么用呢？
自适应布局！！！（下篇详讲）
从它的特性入手，我们还可以知道BFC可以阻止外边距重合。
我们都知道，块级元素垂直方向的margin是会重合，例如这样
<!DOCTYPE html>
<head>
<title>test_slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.div1,.div2 {
width:100px;
height:100px;
margin:20px;
}
.div1 {
background:green;
}
.div2 {
background:pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
从上面的运行结果（红色区域）可以知道，它们垂直方向的margin重叠了。
原因是因为，它们属于同一个BFC（根元素），外边距是会重叠滴。所以只要将它们其中一个属于另一个BFC，就可以啦。
代码和demo见下：
<!DOCTYPE html>
<head>
<title>BFC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.div1,.div2 {
width:100px;
height:100px;
margin:20px;
}
.anotherBFC {
display:table-cell;
}
.div1 {
background:green;
}
.div2 {
background:pink;
}
</style>
</head>
<body>
<div class="anotherBFC">
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
</html>
运行代码，发现的确如此。
从它的特性入手，我们还可以知道BFC可以清楚浮动。以前我知道解决“塌陷”问题的方法中，可以在父元素中加入overflow:hidden，就可以使父元素将浮动元素包裹起来，且清楚浮动，但不知道原因，后来才知道原来它将父元素BFC了，所以在计算父元素高度时，将浮动元素计算在内，又由于BFC不影响外部元素，所以就清楚浮动咯。
这是没有将父元素BFC的运行效果图
<!DOCTYPE html>
<head>
<title>BFC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
这是将父元素BFC后的运行效果图
<!DOCTYPE html>
<head>
<title>BFC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
/*添加overflow:hidden*/
overflow:hidden;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
哈，的确如此哦。
看来善于触发元素BFC，好处多多呀。
BFC之浅析篇的更多相关文章
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- TGL站长关于常见问题的回复
问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...
- C# 程序性能提升篇-1、装箱和拆箱，枚举的ToString浅析
前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆 ...
- Linux 设备模型浅析之 uevent 篇（2）
Linux 设备模型浅析之 uevent 篇 本文属本人原创,欢迎转载,转载请注明出处.由于个人的见识和能力有限,不可能面 面俱到,也可能存在谬误,敬请网友指出,本人的邮箱是 yzq.seen@gma ...
- C# 程序性能提升篇-2、类型（字段类型、class和struct）的错误定义所影响性能浅析
前景提要: 编写程序时,也许你不经意间,就不知不觉的定义了错误的类型,从而发生了额外的性能消耗,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候 ...
- 2、转载一篇，浅析人脸检测之Haar分类器方法
转载地址http://www.cnblogs.com/ello/archive/2012/04/28/2475419.html 浅析人脸检测之Haar分类器方法 [补充] 这是我时隔差不多两年后, ...
- String 源码浅析————终结篇
写在前面 说说这几天看源码的感受吧,其实 jdk 中的源码设计是最值得进阶学习的地方.我们在对 api 较为熟悉之后,完全可以去尝试阅读一些 jdk 源码,打开 jdk 源码后,如果你英文能力稍微过得 ...
- BFC与合并 浅析
BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
随机推荐
- 文件处理命令：sed
使用:sed [-nefr] actionaction:-i直接修改读取的档案内容,而不是由屏幕输出,-r表示支持延伸型正则表达式的语法.动作说明:[n1[,n2]] function n1,n2表示 ...
- LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
同时安装了VS2012和VS2010,用VS2010 时 >LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 问题说明:当安装VS2012之后 ...
- java分享第十六天（ java读取properties文件的几种方法&java配置文件持久化：static块的作用）
java读取properties文件的几种方法一.项目中经常会需要读取配置文件(properties文件),因此读取方法总结如下: 1.通过java.util.Properties读取Propert ...
- 续关于C#的微信开发的入门记录一
前几天写了一篇博客<关于C#的微信开发的入门记录一>,原文地址:http://www.cnblogs.com/zhankui/p/4515905.html,现在继续完善: 目前很多小伙伴都 ...
- 【hihoCoder】1148：2月29日
问题:http://hihocoder.com/problemset/problem/1148 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 思路: 1. 将问题转换成求两个日 ...
- 【Hello CC.NET】CC.NET 实现自动化集成
一.背景 公司的某一金融项目包含 12 个子系统,新需求一般按分支来开发,测完后合并到主干发布.开发团队需要同时维护开发环境.测试环境.模拟环境(主干).目前面临最大的两个问题: 1.子系统太多,每次 ...
- Logging with Debug And Trace (一)
对于一个应用程序而言,Log 必不可少. 在.net 里面,最简单的方式就是用Console 来输出 信息了,例如下面的例子: public class Program { public static ...
- CSS选择器小结
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...
- 《深入理解Java虚拟机》Java内存区域与内存溢出异常
注:“蓝色加粗字体”为书本原语 先来一张JVM运行时数据区域图,再接下来一一分析各区域功能: 程序计数器 程序计数器(program Counter Register)是一块较小的内存空间,它可以 ...
- C语言指针转换为intptr_t类型
1.前言 今天在看代码时,发现将之一个指针赋值给一个intptr_t类型的变量.由于之前没有见过intptr_t这样数据类型,凭感觉认为intptr_t是int类型的指针.感觉很奇怪,为何要将一个指针 ...