BFC机制

BFC（Block Formatting Context）：块格式化上下文

BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照必定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点相似一个BFC就是一个独立的行政单位的意思。也能够说BFC就是一个做用范围。能够把它理解成是一个独立的容器，而且这个容器的里box的布局，与这个容器外的绝不相干。
引自：http://www.javashuo.com/article/p-rytdiolz-w.html

简单来说，BFC提供了一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。

※触发BFC的几种方式

1、给元素设置浮动 float: left | right

2、给元素设置脱离文档流的定位 position: absolute | fixed

3、给元素设置内容溢出 overflow: hidden | scroll |auto

4、给元素设置 display: flex | inline-block | table-cell

※几种常见问题

1、父级外边距折叠塌陷问题

嵌套的块级元素，父子元素紧贴的那一边会合并，作用在父元素上。所以给子元素设置margin-top时，父子元素会一起下移。

例：
嵌套的父子div块级元素，给子元素设置margin

父元素也受到了margin-top的影响

解决方案一、给父级1px的边框

.father{border: 1px solid transparent; /*transparent：设置边框透明*/
}
.son{margin-top: 50px;
}

解决方案二、给父级1px内边距

.father{padding-top:1px;
}
.son{margin-top: 50px;
}

解决方案三、不用margin-top，改用父级内边距padding

.father{padding-top: 50px;/*可能会撑大父元素，所以设置盒子宽高为算进边框的宽高，固定盒子大小*/box-sizing: boder-box;
}

解决方案四、给父元素设置overflow:hidden; （触发bfc）

父元素会变成独立的空间

.father{overflow: hidden;
}
.son{margin-top: 50px;
}

解决方案五、将子元素转换为行内块元素

.son{display: inline-block; /*嵌套的块级元素会塌陷，所以转化为行内块*/margin-top: 50px;
}

解决方案六、有浮动、固定、绝对定位的盒子不存在塌陷问题（触发bfc）

relative也会发生塌陷

/*加给父元素或子元素都可以*/
.father{float: left;  /*设置浮动*/margin-top: 50px;
}.father{position: absolute;  /*绝对定位*/margin-top: 50px;
}.father{position: fixed;  /*固定定位*/margin-top: 50px;
}

2、margin 纵向重叠及合并解决

两个盒子，上面的盒子margin-bottom: 50px; 下面的盒子margin-top: 100px; 则两个盒子纵向距离为100px。
例：

<style>.first{width: 200px;height: 200px;background-color: aqua;margin-bottom: 50px;}.second{width: 200px;height: 200px;background-color: coral;margin-top: 100px;}
</style><div class="first"></div>
<div class="second"></div>

想要纵向边距为两者之和的方法：

解决方案一、直接给其中一个盒子的外边距设为两者之和

<style>.second{width: 200px;height: 200px;background-color: coral;margin-top: 150px;}
</style>

解决方案二、触发bfc，分别给两个盒子套一个父元素，为父元素设置overflow: hidden;

    <style>.father{overflow:hidden;}.first{width: 200px;height: 200px;background-color: aqua;margin-bottom: 50px;       }.second{width: 200px;height: 200px;background-color: coral;margin-top: 100px;}</style><div class="father"><div class="first"></div></div><div class="father"><div class="second"></div></div>

3、清除浮动带来的父元素塌陷

当设置子元素为浮动时，子元素脱标，不占有原位置，父元素会塌陷，不再具有原来的宽高，会改变布局。
例：
正常嵌套的父子元素：

<style>.father{width: 400px;/* 未设置高度，高度由子元素撑起来 */background-color: aqua;padding: 20px;}.son{width: 100px;height: 100px;background-color: lightcoral;}</style><div class="father"><div class="son"></div></div>

当设置子元素为float:left

解决方案一、父元素固定宽高
设置父元素的高度，就不必由子元素撑起来，不会受子元素脱标影响

优点：简单代码量少，没有兼容问题

缺点：内部元素高度不确定的情况下无法使用

解决方案二、添加新元素

clear:left：清除float:left对元素造成的影响

clear:right：清除float:right对元素造成的影响

clear:both：清除float:left和float:right对元素造成的影响

.clear_element{clear: both;
}

<div class="father">...<div class="clear_element"></div>
</div>

添加一个新元素div，设置属性清除浮动clear: both；

缺点：添加了无语义的html元素，不便后期维护

解决方案三、添加伪元素（需设置为块级元素）

.father::after{content: "";   /*内容为空*/display:block; /*::after默认添加行内元素，需设置为块元素*/clear: both;   /*清除浮动*/
}

解决方案四、触发父元素bfc

.father{overflow: hidden; /*可以设置为 hidden  auto scroll*/
}

优点：仅用css实现，代码少，浏览器支持好；

缺点：可能会使超出的部分无法显示

什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）相关推荐

什么是BFC？如何触发BFC
什么是BFC? BFC(Block formattin context), 直译:"块级格式化上下文".在页面上形成一个隔离的独立容器,容器里面的子元素不会影响外面的元素.反之亦是 ...
什么是BFC，如何触发BFC,BFC的作用
BFC:块级格式化上下文理解:BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器.容器内的元素不会影响容器外的元 ...
CSS中的BFC机制
1 什么是BFC 块格式化上下文BFC(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 ...
BFC是什么？BFC的四种理解方式
一 .BFC的解释: 块级格式化上下文,是一块独立的渲染区域,BFC的特性容器里面的元素不会影响外边元素布局,当然外部的元素也不能影响内部元素的布局二 .原理: ①.内部的box ...
BFC是什么？BFC可以做什么？
BFC是什么一.规范解释:块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交 ...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. ...
css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
BFC机制关联浮动与脱离标准流
脱离标准流的方式 1:浮动2:绝对定位3:固定定位, 脱离标准流之后定位的元素,会覆盖浮动的元素, 故此定位的比浮动的脱标等级高. 且在清除脱标带来的影响中,浮动的元素,可以被除浮动的方式来解决对父盒 ...

什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）