清除浮动

清除浮动的几种方式：块级化上下文 、clear：both

一、块级化上下文：

原理：
1.BFC 全称是块级排版上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。2.独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

生成BFC的几种方式：

• 浮动 (元素的 float不为 none）
• 绝对定位元素 (元素的 position为 absolute 或 fixed)
• 行内块 inline-blocks (元素的 display: inline-block)
• 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
• 标题 (元素的 display: table-caption，HTML表格标题默认属性)
• overflow的值不为 visible的元素
• 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

最常见的是使用overflow：hidden的方式使之生成BFC。但基本都不采用这种方式，因为会影响布局，会隐藏超出部分。

二、clear：both

1、添加冗余元素

原理：
当添加了最后一个冗余元素（未设置clear:both
）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
缺点：添加了冗余元素，也不推荐
2、伪元素：after

.fix::after { 
     content:"."; 
     display:block; 
     height:0; 
     visibility:hidden; 
     clear:both;
}

推荐这种方式。
3、双伪元素
使用双伪元素清除浮动

　　　　.clearfix:before,.clearfix:after {
                  content: "";
                  display: block;
                  clear: both;
            }
            .clearfix {
                  zoom: 1;
            }

伪元素改良版，简便但不严谨。