初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么。

什么是BFC

BFC(Block formatting contexts),翻译过来就是块级格式化上下文,指的是一种上下文环境,我们暂且不管它为什么叫这么晦涩冗长的名字,先看看哪些情况能形成BFC,然后看看它有哪些特性,这样我们也就知道它是什么了。就像我们学习js的对象一样,了解一个对象的原型,以及它的属性方法,我们也就知道它是什么了。

如何形成BFC

根据W3C的定义:浮动元素,绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,and table-captions),以及overflow属性值不是“ visible”(visible是overflow的默认值)的块级盒子(视口除外),这些元素就会为他们的内容创建一个BFC。

BFC的特点

在一个BFC中,垂直方向上,盒子是从包含块顶部开始一个挨着一个布局的,两个相邻的盒子的垂直距离是由margin属性决定的,在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。

在一个BFC中,水平方向上,每个盒子的左边缘都会接触包含块的左边缘(从右向左的格式则相反)。除非出现浮动元素和其他元素相互作用的情况(当有浮动元素时,行盒可能因浮动元素而收缩,如果有盒子形成了新的BFC,那这个盒子也可能因浮动元素而变窄)。

这样我们终于知道为什么《精通CSS》里提到外边距塌陷时,为什么设置这么多的条件了:

  1. 处于文档流中的块级元素
  2. 垂直外边距直接相遇

其中第一个条件就是为了防止形成BFC,我们要注意的是BFC内部的子元素之间可以形成外边距塌陷,但BFC元素和其他块级元素是不能形成外边距塌陷的。

BFC的应用

BFC的应用场景比较多,在这里列一些我临时想到的

  1. 清除元素之间的影响

    如果想让一个元素不受另一个元素的影响,可以把其中一个元素放到BFC环境中。

    eg:我们都知道文本会围绕着浮动元素布局,如下图所示
<style type="text/css">
.out{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.f{
width: 50px;
height: 50px;
background: red;
float: left;
}
</style>
<div class="out">
<div class="f"></div>我是文本我是文本我是文本我是文本我是文本我是文本我是文本
我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>



如果我们不想让文本环绕,只想让文本位于右侧,怎么处理呢?

只需要在文本外套一层元素,并且把这个元素变成BFC,这样文本就不会受到浮动元素的影响了。我这里通过修改overflow属性使文本所在元素形成一个BFC。

<style type="text/css">
.out{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.f{
width: 50px;
height: 50px;
background: red;
float: left;
}
.inner{
overflow: auto;
}
</style>
<div class="out">
<div class="f"></div><div class="inner">我是文本我是文本我是文本我是文本我是文本我是文本我是文本
我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div></div>



防止块级元素之间外边距塌陷的方法之一就是利用刚才说的第一个条件,也是同样的原理,形成一个BFC,在这里就不再说了。

2. 清除内部浮动元素对父级元素的影响

eg:

<style type="text/css">
.out{
border: 1px solid blue;
}
.f{
width: 50px;
height: 50px;
background: red;
float: left;
}
</style>
<div class="out">
<div class="f"></div>
</div>

效果图:



如果想让外部元素包含浮动元素,只需将外部元素设置为BFC

<style type="text/css">
.out{
overflow: auto;
border: 1px solid blue;
}
.f{
width: 50px;
height: 50px;
background: red;
float: left;
}
</style>

效果图:



3. 创建自适应布局

如果我们想创建一个两列布局,其中左侧宽度不定,右侧宽度自适应占用剩下的空间,有一种方法就是利用浮动元素和BFC元素的相互作用实现的。

<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.out{
background: blue;
width: 100%;
height: 100%;
}
.f{
float: left;
margin-right: 20px;
height: 100%;
background: red;
}
.r{
overflow: auto;
height: 100%;
background: yellow;
}
</style>
<div class="out">
<div class="f">浮动元素</div>
<div class="r"></div>
</div>

效果图:

总结

BFC是很多CSS规范背后的原理,所以有必要搞清楚BFC。

参考资料:

https://www.w3.org/TR/CSS2/visuren.html#block-formatting

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

BFC的形成条件和特性分析的更多相关文章

  1. MySQL · 特性分析 · 优化器 MRR & BKA【转】

    MySQL · 特性分析 · 优化器 MRR & BKA 上一篇文章咱们对 ICP 进行了一次全面的分析,本篇文章小编继续为大家分析优化器的另外两个选项: MRR & batched_ ...

  2. 助力SpringBoot自动配置的条件注解ConditionalOnXXX分析--SpringBoot源码(三)

    注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 1 前言 本篇接 如何分析SpringBoot源码模块及结构?--SpringBoot源码(二) 上一篇分析了SpringBoo ...

  3. MySQL · 特性分析 · MDL 实现分析

    http://mysql.taobao.org/monthly/2015/11/04/ 前言 在MySQL中,DDL是不属于事务范畴的,如果事务和DDL并行执行,操作相关联的表的话,会出现各种意想不到 ...

  4. 【MySQL】MySQL中where条件的执行分析

    1.问题描述 一条SQL,在数据库中是如何执行的呢?相信很多人都会对这个问题比较感兴趣.当然,要完整描述一条SQL在数据库中的生命周期,这是一个非常巨大的问题,涵盖了SQL的词法解析.语法解析.权限检 ...

  5. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

  6. hive 桶相关特性分析

    1. hive 桶相关概念     桶(bucket)是指将表或分区中指定列的值为key进行hash,hash到指定的桶中,这样可以支持高效采样工作.     抽样( sampling )可以在全体数 ...

  7. node.js http接口调试时请求串行特性分析

    缘起: 产品业务上有个类数据库服务的请求时间比较长(类似mysql的sql查询),为了优化减少并发时的请求数,做了一个并发时共用请求的优化. 通过单元测试后,想通过手动模拟看下效果,发现优化一直不能生 ...

  8. Nor Flash芯片特性分析

    Nor Flash是Intel在1988年推出的非易失闪存芯片,可随机读取,擦写时间长,可以擦写1~100W次,支持XIP(eXecute In Place). 本文以JS28F512M29EWH为例 ...

  9. Android R 新特性分析及适配指南

    Android R(Android 11 API 30)于2020年9月9日正式发布,随国内各终端厂商在售Android设备的版本更新升级,应用软件对Android R 版本的兼容适配已迫在眉睫. 对 ...

随机推荐

  1. 笔记:Binder通信机制

    TODO: 待修正 Binder简介 Binder是android系统中实现的一种高效的IPC机制,平常接触到的各种XxxManager,以及绑定Service时都在使用它进行跨进程操作. 它的实现基 ...

  2. 红黑树——算法导论(15)

    1. 什么是红黑树 (1) 简介     上一篇我们介绍了基本动态集合操作时间复杂度均为O(h)的二叉搜索树.但遗憾的是,只有当二叉搜索树高度较低时,这些集合操作才会较快:即当树的高度较高(甚至一种极 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

    系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...

  4. shiro权限管理框架与springmvc整合

    shiro是apache下的一个项目,和spring security类似,用于用户权限的管理‘ 但从易用性和学习成本上考虑,shiro更具优势,同时shiro支持和很多接口集成 用户及权限管理是众多 ...

  5. ASP.NET Core CORS 简单使用

    CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...

  6. Swift enum(枚举)使用范例

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  7. 如何用Java类配置Spring MVC(不通过web.xml和XML方式)

    DispatcherServlet是Spring MVC的核心,按照传统方式, 需要把它配置到web.xml中. 我个人比较不喜欢XML配置方式, XML看起来太累, 冗长繁琐. 还好借助于Servl ...

  8. 发布APP到app store

    好久好久没写博客了,主要是 都在学习新东西,忙不赢啊. 近段时间在用AC平台学习开发移动APP, 今天开始发布应用. 在ac云控制台编译成ipa后,使用apple提供的Application Load ...

  9. Android Fragment 剖析

    1.Fragment如何产生?2.什么是Fragment Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后 ...

  10. 【代码笔记】iOS-获得当前的月的天数

    一,代码. #import "ViewController.h" @interface ViewController () @end @implementation ViewCon ...