内容简介:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,它规定了内部如何布局,是决定块盒子的布局及浮动相互影响范围的一个区域,并且与这个区域外部毫不相干。
1.BFC简要定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,它规定了内部如何布局,是决定块盒子的布局及浮动相互影响范围的一个区域,并且与这个区域外部毫不相干。
2.BFC创建方式
- 根元素或其它包含它的元素;
- 浮动 (元素的float不为none);
- 绝对定位元素 (元素的position为absolute或fixed);
- 行内块inline-blocks(元素的 display: inline-block);
- 表格单元格(元素的display: table-cell,HTML表格单元格默认属性);
- overflow的值不为visible的元素;
- 弹性盒 flex boxes (元素的display: flex或inline-flex)
3.BFC内部特性
- 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流);
- 处于同一个BFC中的元素相互影响,可能会发生margin collapse;但不同BFC可以阻止margin collapse
- 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
- 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
- 浮动盒区域不叠加到BFC上;
4.BFC应用实例
1.BFC清除浮动
将父元素设置一个能让其变为BFC区域的属性,不如overflow:auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #one{ background:green; width: 100px; height: 50px; float: left; } #two{ background: red; width: 200px; height: 50px; float: left; } #box{ border: 2px solid salmon; width: 400px; overflow: auto; } </style> </head> <body> <div id="box"> <div id="one">one</div> <div id="two">two</div> </div> </body> </html>
2.BFC处理margin collapse
在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。这里讲解父子元素,兄弟元素同理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } p{ padding: 0; margin: 20px 0 20px 0; height: 20px; background-color: burlywood; color: #fff; } div{ overflow: auto;//前后的区别取决于这句话,加上就能让父级生成BFC区域包含它们 width: 250px; background-color: #ccc; } </style> </head> <body> <div> <p>aaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbb</p> </div> </body> </html>
BFC改造后
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 详解Flask上下文
- 详解自监督学习三类主流方法:基于上下文、时序和对比
- DDD:识别限界上下文以及理解上下文映射
- DDD:识别限界上下文以及理解上下文映射
- 如何划分限界上下文
- Spring 上下文的加载
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。