BFC——块级格式化上下文
2016-06-29 19:59
344 查看
BFC(块级格式化上下文)
一、BFC是什么?
从样式上看,具有BFC的容器和普通的容器没有区别。从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。简单来说,BFC就是一种属性。这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
二、BFC的触发
浮动元素:除了属性值为none的元素。position:absolute/fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible(hidden/scroll/auto)
根元素
三、BFC的特性
3.1 BFC阻止元素外边距折叠
两个相邻的元素margin会折叠。而当有BFC产生的时候,外边距不会叠加。3.2 BFC 可以包含浮动的元素
这里就是之前提到的包裹性,这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理,使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性,从而可以包含浮动元素,闭合浮动。W3C 的原文是“'Auto' heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。
3.3 BFC会阻止元素被浮动元素覆盖
3.3.1块级元素会被它的兄弟元素覆盖,触发了BFC的元素不会被它的兄弟浮动元素覆盖
3.3.2 父元素宽度不足以容纳一行中所有子元素时,非浮动子元素会下沉
四、BFC的运用
4.1 BFC实现自适应两栏布局
运用3.3.1触发了BFC的元素不会被兄弟浮动元素覆盖,那么我们只需要让右边的div触发BFC,左边的div进行left浮动。就可以实现效果啦~4.2 BFC清除内部浮动
就像我们知道的一样,float属性会导致破坏,使父元素的高度“塌陷”。那我们可以利用BFC的3.2特性,是父亲元素产生BFC,这时候父亲元素的高度就会回来啦~相关文章推荐
- php做一个简单的分页类
- 北理工Java实验2.5(文件读入与写出)
- 2016下半年工作计划
- Java SE-标识符与命名规则
- Qt---安装
- 在虚机中安装CentOS
- Handler
- 大家好,这是我第一篇在CSDN上的博文,本篇主要讨论小型内存池的设计
- NOIP2013模拟最小比例
- vs2013配置opencv2.4.9
- ssm利用poi将excel数据导入数据库
- Android 媒体编解码器(转)
- 安装完Apache后,配置httpd.conf来使apache来加载php模块
- js获取链接中某个参数的方法
- Linux中搭建SVN服务器
- Qt下重做右键菜单
- JAVA WEB开发之JavaBean
- 无分类编址(CIDR)构成超网
- Linux 如何查看一个进程的堆栈
- iOS import导入pod第三方库不提示问题