CSS篇——BFC
2019-11-20 本文已影响0人
方_糖
一、BFC是什么
BFC（Block Format Content）又称块级格式化上下文。是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
CSS2.1 中只有
BFC和IFC(Inline Format Content), CSS3中还增加了GFC和FFC。
二、创建 BFC 的方式有：
- html 根元素
- float 浮动
- 绝对定位
- overflow 不为 visiable
- display 为表格布局或者弹性布局
三、 BFC重要特性有：
- Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
- 形成了BFC的区域不会与float box重叠
- 计算BFC高度时，浮动元素也参与计算
四、 BFC的主要作用有：
- 清除浮动
- 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
具体情况如下：
防止同一 BFC 容器中的相邻元素间的外边距重叠问题
1.创建两个普通的div: div1(小100px), div2(大200px) 。
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
效果如图：
由于div1和div2同属于<html>下的元素，所以div1和div2同在一个BFC。
image.png
2.分别设置div1：
margin-bottom:100px; ,div2：margin-top:100px
效果如图：
我们预期的结果应该是中间的间距为100px + 100px = 200px ,但是由于BFC的特性："Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。" 导致间距只有100px
image.png
3.所以为了达到我们预期的200px效果，就不能让div1和div2处在同一个BFC里面
当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
所以想要margin不重叠，我们只需要给其中一个div添加父元素，再对父元素使用overflow:hidden;、overflow:auto;、overflow:auto;使他们不在一个BFC里，具体如下：
<div id="div1"></div>
<div style="overflow: hidden"><div id="div2"></div></div>
清除浮动
1.创建两个普通的div: div1(小100px), div2(大200px) 。div1设置float:left;，此时div由于有float的属性了，所以变成了BFC。
效果如图：
image.png
2.如果我们要让两个div不重叠，只需要使div2也成为了BFC即可，这里我们也给div2添加
overflow:hidden
形成了BFC的区域不会与float box重叠
效果如图：
image.png
