css中bfc指的是什么意思-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

css中bfc指的是什么意思

这篇文章主要介绍css中bfc指的是什么意思，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司是一家专注于网站制作、成都网站设计与策划设计,察哈尔右翼中旗网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:察哈尔右翼中旗等地区。察哈尔右翼中旗做网站价格咨询:18982081108

在css中，bfc中文意思为“块级格式化上下文”，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。块格式化上下文包含创建它的元素内部的所有内容。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

何为BFC

BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

形成BFC的条件

1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

5、body 根元素

BFC的特性

1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

实践是检验真理的唯一标准

（1）BFC中的盒子对齐

特性的第一条是：内部的Box会在垂直方向上一个接一个的放置。

css中bfc指的是什么意思

浮动的元素也是这样，box3浮动，他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐。

html：

div {
            height: 20px;
        }
        
        .container {
            position: absolute;  /* 创建一个BFC环境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

（2）外边距折叠

特性的第二条：垂直方向上的距离由margin决定

在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。
css中bfc指的是什么意思

html：

.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中就行了。

css中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; }

.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; }

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; /* overflow: hidden; */ }

.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; overflow: hidden; }

css的选择器有哪些

css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

以上是“css中bfc指的是什么意思”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

http://lswzjz.com/article/pcdjsh.html

新闻中心

何为BFC

（1）BFC中的盒子对齐

（2）外边距折叠

⑵ BFC可以包含浮动的元素(清除浮动)

css的选择器有哪些

其他资讯