CSS清除浮动

来源：

https://www.bilibili.com/video/BV14J4114768?p=196

清除浮动的本质

• 清除浮动的本质就是清除浮动的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动策略

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动——额外标签法

隔墙法，是W3C推荐的做法
在最后一个浮动元素末尾添加一个空的块级标签，例如<div style="clear:both;"></div>
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构比较差

清除浮动——父级添加overflow

给浮动元素父级添加overflow属性，属性值可以为hidden、auto或scroll任意之一。
优点：代码简洁
缺点：无法显示溢出部分

清除浮动——:after伪元素

:after方式是额外标签的升级版，也是给父元素添加

.clearfix:after {
            content: "";//伪元素必须写的属性
            display: block;//插入的元素必须是块级
            height: 0;//不要看见这个元素
            clear: both;//核心代码清除浮动
            visibility: hidden;//不要看见这个元素
        }
 .clearfix { /* IE6、7专有 */
            *zoom: 1;
        }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度，淘宝网，网易等

清除浮动——双伪元素清除浮动

.clearfix:before, .clearfix:after {
            content: "";
            display: table;//转换为块级元素并且一行显示
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等