BFC 小结
最近对一些基础知识进行了整理,下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。
1. 首先,什么是 BFC 呢?
BFC,Block formatting context,直译为“块级格式化上下文”。
**在说 BFC 之前,我们首先要弄懂什么是 formatting context? **
fomating context:格式化上下文,是W3C CSS2.1规范中的一个概念,拥有一套渲染规则。对内来约束其内块级元素的布局,对外来控制和外部元素的布局。通俗一点的讲,它就是页面中的一块渲染区域,规定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context (简称 IFC )。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC(GridLayout Formatting Contexts,直译为"网格布局格式化上下文")和FFC(Flex Formatting Contexts,直译为"自适应格式化上下文")。IFC、GFC、FFC 在这里就不进行详细解释了。
既然有四种渲染规则,那么我们就需要知道在什么情况下会采用哪种渲染规则,box 作为 css 布局的对象和基本单位,它的类型,由其元素的类型和 display 属性决定。不同类型的 box,会参与不同的 fomating context(一个决定如何渲染文档的容器),以不同的方式渲染。那么,都有哪些类型的盒子呢?
① block-level box : display属性为block, list-item, table的元素,会生成block-level box,参与BFC。
② inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box,参与IFC。
③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。(CSS3)
block:块级元素,默认不加修饰的情况下块级元素并不会被收缩包裹其内容,其宽会充斥父元素,高度由自身内容撑开(inline 行内元素会“收缩包裹” 其内容,并且会尽可能包紧)。每个块级元素即使设置了宽度,不占满父元素也会自己占据一行,不让其后元素与自己并行。
说了这么多,我们回到正题:
BFC 就是一个独立的渲染区域,规定了Block-level内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
通俗一点的讲, BFC 就是相当于一个把浮动元素框起来并隔离的容器,容器里面的子容器不会影响到外面的元素,使浮动不会溢出。
2. BFC 布局规则
- 内部的 box 会在垂直方向,一个接一个的放置。
- 每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动,也是如此。
- BFC 的区域不会与float box 重叠。
- BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此。
- 计算 BFC 的高度时,浮动元素也参与计算
3. 哪些元素会生成 BFC ?
- 根元素
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
- position 的值为 absolute、fixed
4. BFC 的作用及原理
(1) 自适应两栏布局
代码:
body {
position: relative;
}
.aside {
width: 300px;
height: 200px;
float: left;
background: #f66;
}
.main {
height: 250px;
background: #fcc;
overflow: hidden; /* 通过触发main生成BFC, 来实现自适应两栏布局,BFC的区域不会与float box重叠 */
}
<div class="aside"></div>
<div class="main"></div>
(2) 清除内部浮动
代码:
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden; /* 触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算 */
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
(3) 防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
代码:
/* 若没有 .wrap ,会发生 margin 重叠,两个p上下之间的距离为30px */
/* 在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。 */
.wrap {
overflow: hidden; /* 防止垂直margin重叠 */
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
总结
因为 BFC 内部的元素和外部的元素绝对不会互相影响,因此,当 BFC 外部存在浮动时,它不应该影响 BFC 内部的 Box 的布局,BFC 会通过变窄而不与浮动有所重叠。同理,当 BFC 内部存在浮动时,为了不影响外部元素的布局,BFC 计算高度时会包括浮动的高度,也因此,避免了 margin 重叠的产生。
想看以上例子的网页实现效果,请点这里
本文链接:http://www.cnblogs.com/xsilence/p/5690093.html
BFC 小结的更多相关文章
- 清除浮动clear/BFC
浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level ...
- CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 由外边距合并到BFC
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- 对于BFC(block format context)理解
目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- Sublime Text 3汉化中文版
Sublime Text 3汉化中文版是Sublime Text2的升级版.Sublime Text 是一款流行的文本编辑器软件,有点类似于TextMate,跨平台,可运行在Linux,Windows ...
- 设置时间 new Date
1.标准格式下的时间是object ,操作时可以通过 var cDate=new Date(startTime.getTime());来复制当前日期避免操作给初始日期带来影响 2. 以月为单位计算想要 ...
- js的一些坑,持续增加,学习js应该注意的问题
大家来补充 1.变量类型模糊,容易出现问题; var a='1',b=1; a==b; //true a===b; //false 2.全局变量与函数内部变量同名时,在函数内部声明变量,声明位置虽然在 ...
- Android提交数据到JavaWeb服务器实现登录
之前学习Android提交数据到php服务器没有成功,在看了两三个星期的视频之后,现在终于实现了与服务器的交互.虽然完成的不是PHP端的,但是在这个过程还是学到了不少东西的.现在我先来展示一下我的成果 ...
- CoreLocation 定位
前言: 本章会使用OC和Swift分别进行实现,需要了解Swift的小伙伴可以翻一下之前的博文 LBS和SoloMo(索罗门) LBS:基于位置的服务,根据定位展示周边美食.景点等信息(全称:Loca ...
- [转 载] android 谷歌 新控件(约束控件 )ConstraintLayout 扁平化布局
序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库. 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件 ...
- 列式存储(二)JFinal如何处理从前台传回来的二维数组
上一篇说到了列式存储,这一篇说它的存储问题,将每个模块的所有属性字段单独存到一张表中,新增页面时,所有的字段都去数据库请求,这样多个模块的新增功能可以共用一个jsp.由于每个模块的字段个数不一样,有的 ...
- 一个统计报表sql问题
今天朋友问我了一个统计报表的sql问题.我弄了好久.终于算是写出来了.这里记录下. 问题: id--------------name--------------addtime1 ...
- 计算机网络和Internet之核心网络
1.网状的路由器 路由器的链接组成了网络的核心. 任何一个路由器,或者某条线路挂掉,但是网络还是通的,这是internet的一个特性. data到底是怎么传输的? 1)circuit switchin ...
- android Gui系统之SurfaceFlinger(1)---SurfaceFlinger概论
GUI 是任何系统都很重要的一块. android GUI大体分为4大块. 1)SurfaceFlinger 2)WMS 3)View机制 4)InputMethod 这块内容非常之多,但是理解后,可 ...