摘要：一直都知道可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。解决方案如下给添加一个属性便会避开计算内层元素的高度。但如果高度有具体的值时，高度超过时还是会被裁剪。
一直都知道overflow可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有BFC这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。
什么是BFC？
BFC的全称是Block Formatting Context 块级格式化上下文。
一般情况下BFC只存在于根级元素，但有时我们在设置某些CSS属性时也会产生BFC。但是前提是必须是块级元素。
以下属性声明会产生BFC：
1、float不为none
2、overflow不为visible
3、position不为static和relative
4、display为inline-block table-cell table-caption
5、flex、inline-flex布局
BFC布局规则
1、内部元素会垂直排列
2、垂直方向的间隔由margin决定，同一个BFC里同级别的两个元素之间的margin会产生坍塌
3、元素会靠在外层元素的左边或者右边，float同理
4、BFC不会与float重叠（absolute,fixed除外）
5、BFC计算高度时，float元素的高度也参与计算
6、BFC是隔离的，它里面元素就算翻江倒海也不会影响外层，外层的各种变化也不会影响BFC。
BFC应用
解决margin坍塌
elementA与elementB之间的实际margin为10px;
在elementB的外层添加一个div设置BFC属性，此时elementA, elementB的间隔为20px,代码如下：
解决float覆盖
123
以上代码中，elmentA会覆盖到elementB上。
解决方案如下,给elementB添加一个BFC属性elementB便会避开elementA：
计算内层float元素的高度。
上述代码中，wrapper是没有高度的，虽然子元素设置了高度为100px,但是由于子元素是float所以父元素没有高度。
解决方案如下,给wrapper添加一个BFC属性，这时wrapper的高度就为子元素的高度：
对overflow：hidden的额外说明
当设置了一个元素为样式为：
overflow：hidden height:auto
元素首先会计算出自己的高度才知道应该裁剪哪一部分，当生成BFC时会首先计算里面元素的高度,当里面有float元素时会计算float元素的高度，并把float元素的高度加到自身高度中。但如果高度有具体的值时，float高度超过时还是会被裁剪。
对position:absolute以及position:fixed的额外说明
在本文前面提到过 BFC的区域不会和float区域重叠，但是absolute和fixed布局有例外。absolute和fixed会覆盖到float元素上，因为absolute和fixed已经脱离文档流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52114.html
摘要：标准盒模型与盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个盒模型。即的标准盒模型以及的怪异盒模型。在中，可以用去定义元素的盒模型。比较这两个盒模型的差异之前，我们先来看一张图先不讨论宽高，我们把一个元素的组成分为。 标准盒模型与IE盒模型 开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，...
摘要：最常见的有简称和简称。计算的高度时，浮动元素也参与计算。遇到这种情形，我们如何处理处理方法其实有很多，在元素中添加或者使其父元素形成一个也可以在元素中添加或是这些都可以有效解决父子元素重叠问题。解决这个问题，只需要把把父元素变成一个就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，...
阅读 592·2021-10-27 14:15
阅读 1142·2021-10-15 09:42
阅读 2722·2019-08-30 15:53
阅读 1260·2019-08-23 17:02
阅读 2942·2019-08-23 16:23
阅读 3143·2019-08-23 15:57
阅读 3438·2019-08-23 14:39
阅读 492·2019-08-23 14:35
