一、clear
clear 属性定义了元素的哪边上不允许出现浮动元素。并不是将浮动元素变成了非浮动的，而是将该元素左右的浮动元素放到下一行。
left ：在左侧不允许浮动元素
right ：在右侧不允许浮动元素
both ：在左右两侧均不允许浮动元素
none：默认。允许浮动元素出现在两侧。
推荐使用伪元素方式清除浮动，代码如下
.clearfix{zoom: 1;/*zoom：1 触发IE hasLayout。*/&::after{content: " 111";display: block;clear: both;font-size: 0;height: 0;visibility: hidden;}}
after伪元素会在内容的最后加入元素，通过 content:"XXX" 生成内容作为最后一个元素，然后给该伪元素设置clear来清除浮动使父元素框撑开，设置伪元素为块级内容撑开剩余空间，同时使用visibility来隐去加入的内容。
二、bfc原理
也可以通过给父级元素增加overflow：hidden来清除浮动
使用这个方法即触发了bfc，bfc是什么呢？
BFC（Block Formatting Context ）块级格式化上下文，是css布局的一个概念。是一块独立的渲染区域，里面的元素不会影响到外部的元素，外部的元素不会影响里面的元素。HTML标签就是最大的一个bfc区域。
BFC原理（布局规则）
内部的box会在垂直方向，从顶部开始一个接一个的放置box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的box的margin会发生重叠每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此BFC的区域不会与float的元素区域重叠（清浮动）计算BFC的高度时，浮动子元素也参与计算
触发BFC的方式
根元素，HTML浮动，float的值不是none绝对定位元素 position的值为absolute或者fixed行内块 display为inline-block表格单元display为table，table-cell，table-caption等弹性盒 display为flex、inline-flexoverflow的值不为visible
bfc的使用场景
清除浮动自适应两栏布局去除margin重叠现象，分属于不同的bfc时，可以避免margin重叠
不推荐使用overflow来清除浮动的原因为，极有可能会导致超出的元素被隐藏，或者出现滚动条从而影响美观。
