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之浅析篇的更多相关文章

  1. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  2. TGL站长关于常见问题的回复

    问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...

  3. C# 程序性能提升篇-1、装箱和拆箱,枚举的ToString浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆 ...

  4. Linux 设备模型浅析之 uevent 篇(2)

    Linux 设备模型浅析之 uevent 篇 本文属本人原创,欢迎转载,转载请注明出处.由于个人的见识和能力有限,不可能面 面俱到,也可能存在谬误,敬请网友指出,本人的邮箱是 yzq.seen@gma ...

  5. C# 程序性能提升篇-2、类型(字段类型、class和struct)的错误定义所影响性能浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的定义了错误的类型,从而发生了额外的性能消耗,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候 ...

  6. 2、转载一篇,浅析人脸检测之Haar分类器方法

    转载地址http://www.cnblogs.com/ello/archive/2012/04/28/2475419.html 浅析人脸检测之Haar分类器方法  [补充] 这是我时隔差不多两年后, ...

  7. String 源码浅析————终结篇

    写在前面 说说这几天看源码的感受吧,其实 jdk 中的源码设计是最值得进阶学习的地方.我们在对 api 较为熟悉之后,完全可以去尝试阅读一些 jdk 源码,打开 jdk 源码后,如果你英文能力稍微过得 ...

  8. BFC与合并 浅析

    BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...

  9. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

随机推荐

  1. expect脚本语言用法示例

    #!/usr/bin/expect set hostname [lindex $argv 0] set username [lindex $argv 1] set passwd [lindex $ar ...

  2. noi往届题目泛做

    noi2015 Day1 t1 程序自动分析  离散化+并查集 t2 软件包管理器  裸树链剖分 t3 寿司晚宴  状压dp Day2 t1 荷马史诗 哈夫曼多叉树 t2 品酒大会 后缀数组按照hei ...

  3. UDP和TCP的区别

    UDP(User Datagram Protocol 用户数据报协议) TCP(Transmission Control Protocol 传输控制协议) UDP是一种非面向连接的传输协议,它的实现是 ...

  4. bootstrap之移动支持

    为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name=" ...

  5. Redis 做消息队列

    一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式.利用redis这两种场景的消息队列都能够实现.定义: 生产者消费者模式:生产者生产消息放到队列里,多个消费者同时监听队列, ...

  6. android之volley学习

    Volley是android的平台通信库,一个新的网络通信框架.Volley 的特点:适合数据量小,通信频繁的网络操作. 获取Volley git 工具使用:git clone https://and ...

  7. Javascript初学篇章_6(BOM)

    BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象 一.window对象 Window对 象表示整个浏览器窗口. 1.系统消息框 alert() alert('he ...

  8. The Solution of UESTC 2016 Summer Training #1 Div.2 Problem C

    Link http://acm.hust.edu.cn/vjudge/contest/121539#problem/C Description standard input/output After ...

  9. 用 string 进行插入、替代、查找输出下标等操作

    string s; s = "; string::iterator it; it = s.begin();//让s指向第一个元素 cout << s; system(" ...

  10. HTML的两三事

    关于在页面布局上,我用了两种方式  用&nbsp来调整需要空格的地方,  用<pre></pre>直接在代码页面调整页面布局  但是用&nbsp来布局当我把网页 ...