CSS-关于BFC的理解(转)
转载于 http://www.jianshu.com/p/76484dff1cb5
- 对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。那首先我们就来看看FC的概念。
- Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
- BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
BFC的生成
- 既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- float的值不为none;
- overflow的值不为visible;
- display的值为inline-block、table-cell、table-caption;
- position的值为absolute或fixed;
看到有人把display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。
BFC的约束规则
浏览器对于BFC这块区域的约束规则如下:
- 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,俩个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。
- 生成BFC元素的子元素中,每一个子元素的外边距和包含块的左边界相接触,(对于从右到左的格式化,右外边距和右边界相接触),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
有朋友对它做了分解,我们直接拿来:
- 内部的BOX会在垂直方向上一个接一个的放置;
- 垂直方向上的距离有margin决定。(完整的说法是:属于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。)
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
- BFC的区域不会与float的元素区域重叠;
- 计算BFC的高度时,浮动子元素也参与计算;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
看到以上的几条约束,让我想起了学习CSS时的几条规则:
- Block元素会扩展到与父元素同宽,所以block元素会垂直排列;
- 垂直方向上的俩个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确);
- 浮动元素会尽量往左上方(或右下方);
- 为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素;
- ……
BFC在布局中的应用
上面说了那么多,那么BFC究竟有什么用,毕竟再好的东西也要为我所用才行。
防止margin重叠:
- 同一个BFC中俩个相邻的box才会发生重叠与方向无关,不过由于上文提到的第一条限制,我们甚少看到水平方向的margin重叠。这在IE这中是个特例,IE可以设置write-mode。
- 要阻止margin重叠,只要将俩个元素别放在一个BFC中即可(可以用上文提到的方式让相邻元素其中一个生成BFC)。阻止俩个相邻元素的重叠看起来没有意义,主要用于嵌套元素。
浮动相关问题;
- 使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或者浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。
多栏布局的一种方式
- 上文提到的一条规则:与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
- 这种布局的特点在于左右俩栏的宽度固定,中间栏可以根据浏览器宽度自适应。
多栏布局
- IE中也有与BFC类似概念的haslayout。
总结
- 在我第一次接触BFC时经常有一个疑问,BFC的结构是什么样的,像DOM一样的树状结构,还是一个BFC集合。其实我们不需要关心BFC的具体结构,这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则我们可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。
- 对于CSS新手来说不建议涉猎BFC,还是应该去看看相应的CSS布局规则,像《CSS设计指南》、《CSS权威指南》这俩本都很不错,达到一定积累再来看BFC,说不定会有一种豁然开朗的感觉。BFC中几乎涉及到CSS布局的所有重要属性,这也是BFC的难点和我们需要掌握BFC的意义所在。
此处要说明的是,这篇文章是我几乎一字不落的抄下来的,因为我对于BFC一窍不通,我认为这样抄录一遍对于我理解BFC会有帮助的,但是看到作者说不建议新手涉猎BFC,我就释然了。
参考文献——我的小树林
作者:wmsj100
链接:http://www.jianshu.com/p/76484dff1cb5
來源:简书
CSS-关于BFC的理解(转)相关推荐
- 关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
- [css] 简述下你理解的优雅降级和渐进增强
[css] 简述下你理解的优雅降级和渐进增强 优雅降级,先做好一个完善的具备完整体验的版本,再向下做兼容. 渐进增强,先做好一个可以基本正常使用的版本,再慢慢丰富体验和内容. 个人简介 我是歌谣,欢迎 ...
- [css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
- [css] 请说下你对css对象模型(CSSOM)的理解
[css] 请说下你对css对象模型(CSSOM)的理解 CSSOM 是一组允许 JavaScript 操作 CSS 的 API.它非常类似于 DOM,但是用于 CSS 而不是 HTML.它允许用户动 ...
- html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
CSS clear是什么属性... 语法: clear : none | left |right | both 参数: none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left ...
- css旋转属性如何理解
css旋转属性如何理解 1.css旋转属性为transform. transform属性说明 2.transform属性将2D或3D转换为元素.这个特性允许我们旋转,缩放,移动或者倾斜元素. tran ...
- 关于css盒子模型和BFC的理解
CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...
- bfc是什么_一次弄懂css的BFC
前言 BFC在css的学习中是重要的但不易理解的概念,BFC也牵扯了很多其他问题,如浮动.定位.盒模型等,因此弄懂BFC是很有必要的.本文对BFC进行总结,希望对你有所帮助. BFC是什么? 先看看M ...
- BFC——通俗理解什么是BFC
文章目录 常规流布局 BFC的概念 BFC的创建 BFC的特性 BFC的应用 解决高度坍塌的问题 相邻父子元素外边距合并问题 无视浮动盒子排序问题 总结 在理解BFC之前,我们需要先回顾常规流布局的概 ...
- 前端必经之路:CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
最新文章
- Spring5源码 - 07 Spring Bean 生命周期流程 源码解读02
- wordpress安装_WordPress第三课:使用SOFTACULOUS安装WORDPRESS
- 简单说下C#变量的作用域
- 送书 | 人类细胞图谱计划发起人Aviv Regev博士讲单细胞基因组学
- 《Python编程从入门到实践》记录之第4章 列表操作——列表遍历、列表切片、列表解析、元组、range函数(思维导图)
- zookeeper安装和使用
- [转]WebService 之 WSDL文件 讲解
- Linux编程(2)_软件的安装和卸载
- Python对象的比较、拷贝
- 计算机考试图表怎么做,2017年最新计算机考试Excel知识点:创建图表
- mysqld_multi单机启动多个mysql
- 卷积神经网络-加载数据集
- 2021年机修钳工(中级)考试试卷及机修钳工(中级)试题及解析
- incaseformat蠕虫病毒样本分析
- C++11 forward完美转发
- Android添加Flurry统计
- 1.机器学习入门-初学者的机器学习
- MATLAB写入文件的操作
- CentOS 打开3306端口
- 02 编辑素材和Tilemap
热门文章
- 计算机应该怎样复制桌面,电脑全屏复制快捷键是什么(史上最全电脑快捷键集合)...
- 计算机第三课细心小编辑教案,教案-第6课小小编辑师
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java基于框架的动漫网站设计与实现q6dcx
- 学习资料 AND ORR
- baidu 地图 3d版 自定义地图样式
- 通过HTML和CSS制作二级菜单栏
- MATLAB与线性代数--简化阶梯矩阵
- android 读取本地超大图片
- 产品经理和项目经理的职责分工
- 天津大学计算机学院李晨曦,李晨曦-天津大学-生物医学光子成像实验室