2020-12-01 11:39发布
引言:
这篇文章是我对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就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
看到这里是不是有丈二和尚摸不着头脑的感觉,下面我就用案例来帮助理解认识:
四、实践是检验真理的唯一标准
特性的第一条是:内部的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的条件
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
通过以下方式,能创建一个 BFC 规范的布局(根据我熟悉的程度简单划分几类,如下):
平时常用
根元素是 html
设置 float 的元素(脱离文档流)
position: absolute | fixed(脱离文档流)
block 元素设置 overflow (非 visible,内容不被加工处理,直接显示)
display: inline-block
display: flex | inline-flex
display: grid | inline-grid
不常用(table 系)
display: table-cell(table 单元格 cell 默认为此样式)
display: table-caption(table caption 默认为此样式)
display: table, table-row, table-row-group, table-header-group, table-footer-group
不常用
display: flow-root
设置 contain: layout, content, paint 的元素
column-count or column-width 不为 auto 的元素(包括 column-count: 1)
column-span: all
触发BFC的方式(一下任意一条就可以)
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、tabble-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
1. 根标签
2. float值不为none
3. overflow的值不位visible
4. display的值为inline-block
5. position的值为absoluted和fixed
一、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盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局
一、何为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的理解及总结,带你揭开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的条件
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
通过以下方式,能创建一个 BFC 规范的布局(根据我熟悉的程度简单划分几类,如下):
平时常用
根元素是 html
设置 float 的元素(脱离文档流)
position: absolute | fixed(脱离文档流)
block 元素设置 overflow (非 visible,内容不被加工处理,直接显示)
display: inline-block
display: flex | inline-flex
display: grid | inline-grid
不常用(table 系)
display: table-cell(table 单元格 cell 默认为此样式)
display: table-caption(table caption 默认为此样式)
display: table, table-row, table-row-group, table-header-group, table-footer-group
不常用
display: flow-root
设置 contain: layout, content, paint 的元素
column-count or column-width 不为 auto 的元素(包括 column-count: 1)
column-span: all
触发BFC的方式(一下任意一条就可以)
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、tabble-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
1. 根标签
2. float值不为none
3. overflow的值不位visible
4. display的值为inline-block
5. position的值为absoluted和fixed
1、浮动元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);
相关问题推荐
一、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盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...
BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局
一、何为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;(行内块元素);内联元素...