2020-11-26 10:03发布
BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:
浮动定位
外边距合并
清除浮动
自适应多栏布局
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件:
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
特性:
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定(外边距不会合并)
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时,浮动元素也参与计算
5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
首先引用一下WC3对BFC的专业解释
BFC(Block Formatting Context):翻译成中文叫做块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,其提供了一个环境,元素在这个环境中按照一定的规则进行布局排列
换句话说,BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素
先来了解一下有哪些条件可以触发BFC:
float 不为 none
float
none
position 为 absolute 或 fixed
position
absolute
fixed
overflow 不为 visible
overflow
visible
display 为 inline-block 或 table 或 flow-root
display
inline-block
table
flow-root
后续的案例中,但凡遇到需要触发BFC的,都可以按照这四个条件来使用
BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现,并且它也影响着浮动元素和其他元素。
引言:
这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。
一、何为BFC
二、形成BFC的条件
1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed); 3、display 为以下其中之一的值 inline-block,table-cell,table-caption; 4、overflow 除了 visible 以外的值(hidden,auto,scroll);
三、BFC的特性
1.内部的Box会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由margin决定 3.bfc的区域不会与float的元素区域重叠。 4.计算bfc的高度时,浮动元素也参与计算 5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
看到这里是不是有丈二和尚摸不着头脑的感觉,下面我就用案例来帮助理解认识:
四、实践是检验真理的唯一标准
特性的第一条是:内部的Box(块级元素)会在垂直方向上一个接一个的放置。(这条特性不必纠结,即便不在BFC里块级盒子也会垂直排列)
特性的第二条:垂直方向上的距离由margin决定
在常规文档流中,两个兄弟盒子之间的垂直距离是由他们的外边距所决定的,但不是他们的两个外边距之和,而是以较大的为准。
html:
css:
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
这里我门可以看到,第一个子盒子有上边距(不会发生margin穿透的问题);两个子盒子的垂直距离为20px而不是30px,因为垂直外边距会折叠,间距以较大的为准。
那么有没有方法让垂直外边距不折叠呢?答案是:有。特性的第5条就说了:bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素,同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .wrapper { overflow: hidden; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
(3)不被浮动元素覆盖
以常见的两栏布局为例。
左边固定宽度,右边不设宽,因此右边的宽度自适应,随浏览器窗口大小的变化而变化。
.column:nth-of-type(1) { float: left; width: 200px; height: 300px; margin-right: 10px; background-color: red; } .column:nth-of-type(2) { overflow: hidden;/*创建bfc */ height: 300px; background-color: purple; }
还有三栏布局。
左右两边固定宽度,中间不设宽,因此中间的宽度自适应,随浏览器的大小变化而变化。
.column:nth-of-type(1), .column:nth-of-type(2) { float: left; width: 100px; height: 300px; background-color: green; } .column:nth-of-type(2) { float: right; } .column:nth-of-type(3) { overflow: hidden; /*创建bfc*/ height: 300px; background-color: red; }
也可以用来防止字体环绕:
众所周知,浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
(1)环绕
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; /* overflow: hidden; */ }
(2)利用bfc防止环绕
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; overflow: hidden; }
(4)BFC包含浮动的块
这个是大家再熟悉不过的了,利用overflow:hidden清除浮动嘛,因为浮动的盒子无法撑出处于标准文档流的父盒子的height。这个就不过多解释了,相信大家都早已理解。
总结
我希望这篇文章已经向你展示了BFC的相关特性,以及他们如何影响元素在页面上的视觉定位。所有的例子都展示了它们在实际案例中的应用,这应该会使得他们更加清晰。
如果你有任何东西想要补充,请在评论中留言,欢迎共同讨论。
BFC的英文全称是 Block Formatting Contex 翻译出来就是 格式化上下文
BFC是 W3C CSS2.1 规范中提出的一个概念,它是页面中的一块渲染区域,并且它有一套渲染规则,决定了自己的子元素和周围的元素之间的关系。以下这些条件会产生BFC(MDN里面查到的):1.根元素()2.浮动元素(元素的 float 不是 none)3.绝对定位元素(元素的 position 为 absolute 或 fixed)4.行内块元素(元素的 display 为 inline-block)5.表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)6.表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)7.匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-8.footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)9.overflow 值不为 visible 的块元素10.display 值为 flow-root 的元素11.contain 值为 layout、content或 paint 的元素12.弹性元素(display为 flex 或 inline-flex元素的直接子元素)13.网格元素(display为 grid 或 inline-grid 元素的直接子元素)14.多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)15.column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
bfc元素所具有的特性1.内部的盒子会在垂直方向上一个接一个的放置。(类似标准流)2.垂直方向上的距离由margin决定 (类似标准流)3.bfc的区域不会与float的元素区域重叠。(比如等分布局可以用到)4.计算bfc的高度时,浮动元素也参与计算5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...
1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...
定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素,float 除 none 以外的值; 2、定位元素,p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。
float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...
1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...
最多设置5个标签!
BFC 是 Block Formatting Context(块级格式化上下文)的缩写,
它是为了解决如下问题:
浮动定位
外边距合并
清除浮动
自适应多栏布局
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件:
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
特性:
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定(外边距不会合并)
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时,浮动元素也参与计算
5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
清除浮动
margin-top塌陷
垂直方向的margin重叠
自适应布局
一、什么是BFC
首先引用一下WC3对BFC的专业解释
BFC(Block Formatting Context):翻译成中文叫做块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,其提供了一个环境,元素在这个环境中按照一定的规则进行布局排列
换句话说,BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素
二、如何触发BFC
先来了解一下有哪些条件可以触发BFC:
float
不为none
position
为absolute
或fixed
overflow
不为visible
display
为inline-block
或table
或flow-root
后续的案例中,但凡遇到需要触发BFC的,都可以按照这四个条件来使用
BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现,并且它也影响着浮动元素和其他元素。
CSS中的BFC详解
引言:
这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。
一、何为BFC
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
二、形成BFC的条件
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
三、BFC的特性
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时,浮动元素也参与计算
5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
看到这里是不是有丈二和尚摸不着头脑的感觉,下面我就用案例来帮助理解认识:
四、实践是检验真理的唯一标准
(1)BFC中的盒子对齐
特性的第一条是:内部的Box(块级元素)会在垂直方向上一个接一个的放置。(这条特性不必纠结,即便不在BFC里块级盒子也会垂直排列)
(2)外边距折叠
特性的第二条:垂直方向上的距离由margin决定
在常规文档流中,两个兄弟盒子之间的垂直距离是由他们的外边距所决定的,但不是他们的两个外边距之和,而是以较大的为准。
html:
css:
这里我门可以看到,第一个子盒子有上边距(不会发生margin穿透的问题);两个子盒子的垂直距离为20px而不是30px,因为垂直外边距会折叠,间距以较大的为准。
那么有没有方法让垂直外边距不折叠呢?答案是:有。特性的第5条就说了:bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素,同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。
html:
css:
(3)不被浮动元素覆盖
以常见的两栏布局为例。
左边固定宽度,右边不设宽,因此右边的宽度自适应,随浏览器窗口大小的变化而变化。
html:
css:
还有三栏布局。
左右两边固定宽度,中间不设宽,因此中间的宽度自适应,随浏览器的大小变化而变化。
html:
css:
也可以用来防止字体环绕:
众所周知,浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
html:
css:
(1)环绕
(2)利用bfc防止环绕
(4)BFC包含浮动的块
这个是大家再熟悉不过的了,利用overflow:hidden清除浮动嘛,因为浮动的盒子无法撑出处于标准文档流的父盒子的height。这个就不过多解释了,相信大家都早已理解。
总结
我希望这篇文章已经向你展示了BFC的相关特性,以及他们如何影响元素在页面上的视觉定位。所有的例子都展示了它们在实际案例中的应用,这应该会使得他们更加清晰。
如果你有任何东西想要补充,请在评论中留言,欢迎共同讨论。
BFC的英文全称是 Block Formatting Contex 翻译出来就是 格式化上下文
BFC是 W3C CSS2.1 规范中提出的一个概念,它是页面中的一块渲染区域,并且它有一套渲染规则,决定了自己的子元素和周围的元素之间的关系。
以下这些条件会产生BFC(MDN里面查到的):
1.根元素()
2.浮动元素(元素的 float 不是 none)
3.绝对定位元素(元素的 position 为 absolute 或 fixed)
4.行内块元素(元素的 display 为 inline-block)
5.表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
6.表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
7.匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-8.footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
9.overflow 值不为 visible 的块元素
10.display 值为 flow-root 的元素
11.contain 值为 layout、content或 paint 的元素
12.弹性元素(display为 flex 或 inline-flex元素的直接子元素)
13.网格元素(display为 grid 或 inline-grid 元素的直接子元素)
14.多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
15.column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
bfc元素所具有的特性
1.内部的盒子会在垂直方向上一个接一个的放置。(类似标准流)
2.垂直方向上的距离由margin决定 (类似标准流)
3.bfc的区域不会与float的元素区域重叠。(比如等分布局可以用到)
4.计算bfc的高度时,浮动元素也参与计算
5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
BFC 是 Block Formatting Context(块级格式化上下文)的缩写,
它是为了解决如下问题:
浮动定位
外边距合并
清除浮动
自适应多栏布局
相关问题推荐
一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...
1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...
定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素,float 除 none 以外的值; 2、定位元素,p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。
float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...
1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...