BFC用途总结
前次写了一些关于BFC的基本概念,这次接上次的写一些BFC的应用。
BFC引起margin塌陷
在常规流中,盒子在垂直方向上从上到下排列。垂直方向之间的距离由单个margin值决定(其中还有计算公式),而不是两个元素垂直方向的margin值之和。
下面让我们看一张图片来加深理解:
如上图,其代码结构:
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
css代码如下:
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
看上去,两个p元素之间的距离应该是20px,但实际上是10px,这就是“margin塌陷”。上面提到的计算公式就是:两元素之间的距离始终以最大margin值决定,若相等则等于其中一个值。
使用BFC阻止margin塌陷
这看上去与第一个作用有点矛盾,但是请大家记住,造成margin塌陷的原因是相邻的盒子属于同一个BFC。如果它们不在一个BFC中,就不会塌陷,所以我们要使它们存在于两个BFC中。
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
如下图:
使用BFC来包含浮动块
在日常工作中经常会遇到一个容器包含浮动的子元素,此时子元素脱离常规文档流,父容器没有高度。一般的解决方法是使用“clearfix”,但是同样可以使用BFC来解决。
下面代码会造成第一种情况:
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
稍加改造,就会有上图右边的结果:
.container {
overflow: hidden; /* creates block formatting context */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
使用BFC阻止文本环绕
Figure1的文本环绕图片,但正常情况下,我们需要实现Figure2中排版。可以使用margin来实现,但是我们依旧可以使用BFC来完成。
<div class="container">
<div class="floated">
Floated div
</div>
<p>
Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora
expedita.
</p>
</div>
.floated{
float:left;
}
如果此时使p创建一个BFC,就会达到我们要的效果:
p{
overflow:hidden;
}
使用BFC进行多列布局
在一个容器中我们要进行多列布局,并且覆盖整个宽度,有时候最后一列会错位。原因是一些浏览器会四舍五入值导致最后总宽度之和大于容器的宽度。此时就可以用BFC解决:
<div class="container">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
.column {
width: 31.33%;
background-color: green;
float: left;
margin: 0 1%;
}
/* Establishing a new block formatting
context in the last column */
.column:last-child {
float: none;
overflow: hidden;
}
在flex没有出现之前是没有好的办法解决此类问题的。
上面就总结了一些用法,肯定还有别的使用场景,以后慢慢总结。
参考:
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
- 前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作
- hdu 4081 Qin Shi Huang's National Road System (次小生成树)
- python读取系统信息
- hdu 3948 Portal (kusral+离线)
- linuxmint下pycharm创建桌面快捷方式
- hdu 1811 Rank of Tetris (并查集+拓扑排序)
- Pycharm常用技巧
- hdu 1598 find the most comfortable road(枚举+卡鲁斯卡尔最小生成树)
- 查询IP地址归属详情
- oracle commit详解
- hdu 4315 Climbing the Hill(阶梯博弈转nim博弈)
- iftop实时网络流量监控工具的安装使用
- hdu 3908 Triple(组合计数、容斥原理)
- hdu 4034 Graph (floyd的深入理解)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- django rest framework 自定义返回方式
- PHP+Ajax实现的检测用户名功能简单示例
- Yii框架学习笔记之session与cookie简单操作示例
- Ajax+Jpgraph实现的动态折线图功能示例
- Python闭包及装饰器运行原理解析
- Django中Q查询及Q()对象 F查询及F()对象用法
- keras.layer.input()用法说明
- python入门:argparse浅析 nargs='+'作用
- PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
- YII框架行为behaviors用法示例
- 浅谈Python里面None True False之间的区别
- python如何导入依赖包
- 深入理解Python 多线程
- Yii2框架自定义验证规则操作示例
- 浅析PHP 中move_uploaded_file 上传中文文件名失败