css清除浮动，以及BFC的学习

1、浮动的定义

• 浮动元素停止的标准：浮动的元素可以向左或向右移动，直到它的外边框碰到父元素的边框或者其他浮动框的边框为止！（注意是其他浮动框的边框！敲黑板！）
• 浮动的元素不在普通文档流中

2、不清除浮动的影响

• 对浮动元素的父级元素的影响 ：父元素的高度无法被撑开，影响与父元素同级元素的布局
• 对与浮动元素的同级元素的影响：浮动元素的同级元素，如果有非浮动的话，可能会被浮动元素所覆盖。影响非浮动元素的布局

清除浮动是指清除浮动所造成的影响。

3、清除浮动的方法

3.1 加高法

• 给浮动的元素的祖先元素添加高度
• 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素，也就清除浮动带来的影响了

工作上，我们不会给所有的盒子加高度，因为麻烦，并且不能适应页面的快速变化

3.2 overflow法

给父元素设置overflow:hidden 或 overflow:auto 或overflow:scroll属性

.clear{
  overflow: hidden;   //或者 auto、scroll
}
           

原理：父容器会形成BFC，BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版。详情见第四点

3.3 伪类元素清除法(clear:both方法)

设置全局通用的伪类来清除浮动

.clearfix:before,.clearfix:after { 
    content:".";    /* 内容为小点，尽量不要空，否则旧版本浏览器有空隙*/
    display:block;    /* 转换为块级元素 */
    height:0;   /* 高度为0，避免生成内容破坏原有布局的高度*/
    visibility:hidden;    /* 使生成的内容不可见 */
    clear:both;   /* 清除浮动 */
}
.clearfix{
    *zoom:1;   /* 兼容ie6、7，zoom是ie6/7清除浮动的方法 */
}
           

3.4 空标签法(clear:both法)

通过在浮动元素末尾（同级）添加一个空的标签，设置clear:both属性

<div class="box1">	
	<div class="child-1">child-1</div>	
	<div class="child-2">child-2</div>	
	<div style="clear:both"></div>	
</div>
           

4、BFC 为什么能清除浮动

4.0 overflow：hidden清除浮动的原因(可用于面试回答)

回答：

当给父元素设置"overflow:hidden"时，实际上创建了一个BFC容器。

在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。

因此可用于清除浮动，防止高度塌陷。

4.1 BFC定义

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

4.2 BFC布局规则

1）、BFC元素垂直方向的边距会发生重叠

2）、BFC的区域不会与浮动元素的box重叠

3）、BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。

4）、计算BFC高度的时候，浮动元素也会参与计算（可用于清除浮动）。

4.3 创建一个BFC

首先我们要知道怎样创建BFC。一个BFC可以被显式触发，只需满足以下条件之一：

• overflow不为visible，overflow为auto,hidden，scroll；（触发创建BFC,清除浮动）
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。
• position的值为fixed / absolute；
• float的值不为none；

BFC参考链接：https://www.jianshu.com/p/7e04ed3f4bea