bfc初探

yzd 发布于2019-08-29 12:55 / 759人阅读

摘要：初探什么是全称是块级格式化上下文，是可视化渲染的一部分，它是块级盒子的布局发生，浮动互相交互的部分。可以把父元素设置成这样可以使这个元素包含其浮动子元素。而浮动元素本身是脱离文档流的，非元素的高度计算是不会把浮动元素计算在内。

bfc初探 什么是bfc

bfc全称是块级格式化上下文（block formating context），是web可视化css渲染的一部分，它是块级盒子的布局发生，浮动互相交互的部分。

我所理解的bfc本质上是一个透明的箱子，我们完全看不到这个箱子，但是这个箱子是独立于外部其他容器而存在的，在这个箱子内部有bfc内部自己的渲染逻辑。

bfc布局规则

bfc内的元素一次从上往下排列。

bfc垂直方向的距离有margin决定，且相邻两个元素宽度会发生折叠

bfc内部的元素的左边框总是与容器的左边框重合，浮动也不例外

bfc不会与float box重叠

计算bfc的高度，浮动也会计算在内

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

触发bfc的条件

根元素或者包含根源的元素

float不为none

dispaly为absolute或者fixed

overflow不为visiable

dispaly为inline-block或者table-cell或者table-caption

bfc的应用场景

用bfc包含浮动

如果不创建bfc。浮动元素的父元素的高度会是0，给父元素加一个overflow：hidden。可以把父元素设置成bfc,这样可以使这个元素包含其浮动子元素。

//html

    p1
    p2



    p3
    p4



//css
.floatdiv1{
    width: 200px;
    overflow: hidden;
    background-color: green;
    border: 1px solid red;
    margin-bottom: 40px;
}
.floatdiv2{
    width: 200px;
    background-color: yellow;
    border: 1px solid blue;
    margin-bottom: 40px;
}
.floatdiv1 p , .floatdiv2 p{
    float: left;
    width: 50px;
    background-color: pink;
    height: 50px;
    margin: 10px;
}

计算bfc的高度的时候，浮动元素也会参与计算。而浮动元素本身是脱离文档流的，非bfc元素的高度计算是不会把浮动元素计算在内。

用bfc阻止文字环绕。

正常情况下，如果一个块级元素设置成了float，那么他的兄弟元素会环绕其布局。

//html

    
    


//css
.outer{
    width: 200px;
}
.inner1{
    float: left;
    height: 50px;
    width: 50px;
    background-color: orange;
}
.inner2{
    background-color: cadetblue;
    height: 200px;
    //overflow: hidden;   这里设置overflow的话就会让inner成为一个bfc
}

如果inner2设置了overflow属性，看到效果是下面的图

inner会环绕在浮动元素div周围，因为同一个bfc中，元素左边总是触碰到容器的左边，即使存在浮动也是如此。如果不想这样，可以给文字一个overflow：hidden。这样文字所在的区域就成了一个bfc,bfc是不会和float元素重叠的。

解决外边距折叠问题

外边距折叠的情况：

防止外边距折叠的问题的方法是给bfc内部再写一个bfc。

//外边距折叠的情况
//html

    
    
    


//css
.div1{
    width: 200px;
    background-color: blue;
}
.div1 p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
}

解决方案是，把p标签多带带写进一个个的bfc里面，比如在p外边包一层overflow是hidden的div。这样的话，两个p标签不属于一个bfc，就不会发生margin折叠的情况。

//html

    
    
    
        
    


//css
.div1{
    width: 200px;
    background-color: blue;
}
p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
    overflow: hidden;
}
.div2{
    overflow: hidden;
}

//把第三个p标签写进一个bfc中，这样的话，第二个p和第三个p就不会发生折叠，行距是双倍的行距而不是单倍的。

外边距的执行结果

如果上下的外边距都是正的，间隔距离取外边距的最大值

如果上下的外边距都是负的，间隔距离取外边距绝对值大的

如果上下的外边距一正一副，间隔距离是相加的和

触发外边距折叠的必要条件

元素必须是块级盒子，block，list-item table

元素必须是常规文档流，且处在同一个bfc中

必须是垂直方向上相邻的元素，这两个是触发折叠的必要条件

不会触发折叠的情况

不处在一个bfc中不会触发bfc

另外，浮动元素，position是absolute或者fixed的元素不会出现这种情况，因为不是常规文档流

如果一个父元素含有padding或border，那么他与其第一个子元素不会发生折叠

超融合服务器私有云 bfc bfc布局初探webrtc webrtc技术初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112233.html

CSS：BFC 最熟悉的陌生人

摘要：就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。最常见的有和，中还增加了和，这里就不深入研究了。其根本原理就是它们处于同一个，符合属于同一个的两个相邻元素的会发生重叠的规则。 BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是...

focusj 2019-08-29 13:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

岳光 2019-08-30 15:55 评论0 收藏0