清除浮动的方式、BFC块级标准化上下文原理与使用（看这一篇就够了）

今天是准备面试的第6天，我们来深入了解一下面试高频问题，清除浮动的方式、BFC块级标准化上下文原理与使用。

一、预备知识

想深入了解清除浮动的方式、BFC块级标准化上下文原理与使用，我们需要理解几个概念

1. 文档流和文本流
   文档流：是相对于盒子模型讲的（布局）
   文本流：是相对于文字段落讲的（文本内容）
   我经常把页面理解为3层结构（虽然是两层）文档流、文本流、非文档流文本流。我们都知道定义了float属性，该盒子脱离文档流，但没有脱离文本流，我们页面上会看到盒子可能会发生重叠没有占据自己独有的空间，但依然占据了文本的空间，那我提一个问题考考大家，position中设置fix和absolute，它脱离了文档流还是文本流？你是对的，它两个都脱离了，在页面上它既会与盒子重叠，也会与文本重叠。
   
   2.包含块
   包含块影响了一个元素的尺寸和位置，简单来说就是物理中的参考系，大多数情况下，包含块就是这个元素最近的祖先元素的content区域，但不是总是这样，
   特例有：
   一个元素设置了position:absolute，它的包含块就是由离它最近的position的值不为static的祖先元素的内边距区组成
   一个元素设置了position：fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
   因为我们今天的主题不是这个，我们就一笔带过了

二、清除浮动

清除浮动我将其分为两方式使用clear的方式和使用BFC布局模式清除浮动，BFC后面会详细讲解
我们先用代码看一下，由于浮动给我们带来的问题吧

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    color: red;
    margin: 4px;
    float: left;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

<div class="topDiv">
    <div class="floatDiv">float left</div>
	<div class="textDiv">123</div>
</div>

根据我们观察，好像红色盒子与其他盒子不在一个流上，盒子发生了重叠，但和123好像有在一个层上，这也就是我们上面是的float脱离了文档流，但没脱离文本流。现在这个样子显然不我们想要的

方式一：使用clear样式

/* 其他代码和上面一样 */
.textDiv {
    color: blue;
    border: 2px solid blue;
    clear:left; /* 修改处 */
}

clear:left;清除了该块级元素左边的浮动

方式二：父元素结束标签之前，插入清除浮动的块级元素

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    color: red;
    margin: 4px;
    float: left;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}
.clear{
	clear: both;
}

<div class="topDiv">
    <div class="floatDiv">float left</div>
	<div class="textDiv">123</div>
	<div class="clear"></div>
</div>

你是不是会觉得为什么还有重叠，这似乎没有完全的清除浮动，不，他是清除了的，清除浮动的目的是，防止浮动影响 清除浮动 后面的元素，他放盒子的顺序是，想放浮动盒子红色盒子，再放蓝色盒子发生重叠，再放插入的清除浮动块，将浮动清除，撑起黑色的大盒子。（注意：在父元素末尾添加的元素必须为块级元素，否则无法撑起父级元素的高度）

方式三：使用伪元素

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    color: red;
    margin: 4px;
    float: left;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}
.clearfix:after{/*修改处*/
	content: '';
	display: block;
	height: 0;
	clear: both;
}

<div class="topDiv clearfix"><!-- 修改处 -->
	<div class="floatDiv">float left</div>
	<div class="textDiv">123</div>
</div>

效果和方法二一样，原理我就不再多说，你发现没方法一到方法三，原理是不是都是使用clear属性，只是对其进行了稍微的改良，原理都是一样的。

方法四：使用格式化上下文BFC

下一个小标题我会具体说明BFC，我们现在就使用其中一个方法来实现
overflow

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;
    overflow: hidden;/*修改处*/
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    color: red;
    margin: 4px;
    float: left;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

<div class="topDiv"><!-- 修改处 -->
	<div class="floatDiv">float left</div>
	<div class="textDiv">123</div>
</div>

想了解这个方法的原理，怎么也绕不出块级标准化上下文（BFC），这里就是使用的在计算BFC的高度时浮动也计算在内的特性。

三、BFC原理及使用(面试必考)

在我看来BFC就是一个独立的渲染区域，规定了内部如何布局，并且与外部互不相干。

1. BFC规则

• BFC内部的盒子在垂直方向上，一个接一个的放置
• 盒子在垂直方向上的距离由margin决定，在BFC内部有两相邻的盒子两个盒子margin会发生重叠。（取最大的那个）
• 每个元素的margin box的左边会与包含块 border box的左边相接触，有浮动也是一样
• BFC不会与浮动的盒子重叠
• BFC是页面上的隔离的独立容器，内部的元素不会影响的外部的元素，反之也如此。
• 在计算BFC的高度时浮动也计算在内

2. 哪些元素会触发BFC

• 根元素
• float属性不为none
• position属性为absolute和fixed
• display属性为inline-block、flex、table-cell
• overflow属性不为visible

3. 使用举例

自适应两栏布局

布局规则三：每个元素的margin box的左边，与包含块border box的左边相接触，有浮动也如此
因此存在浮动的textDiv、floatDiv的margin box的左边与包含块的border box的左边相接触
布局规则四：BFC不会与浮动盒子发生重叠
可以触发floatDiv生成BFC，来实现两栏布局

清除浮动

布局规则六：在计算BFC高度时，浮动也计算在内

成功把par盒子撑起来了

防止margin重叠

布局规则二：盒子在垂直方向的距离由margin决定，在同一个BFC中的两个相邻的盒子margin会发生重叠

解决方案有很多，可以只是给一个盒子设置margin，也可以给Haha嵌套一个BFC，那我们就用嵌套BFC方法来写

总结

在我讲完BFC后，你有没有发现HTML里处处有BFC模式，根节点是BFC，还有很多方式可以触发BFC，我们平时在用，但是不知原理，知道其中原理才可以灵活使用，前端似乎很简单，深入了解会有另一番风味。