清除浮动的4种方式

整理笔记系列——清除浮动在前端开发中用的很多，也是面试的时候经常被问到的。

清除浮动的4种方式：

1. 父元素添加overflow:hidden;

.father{
overflow:hidden;
}

缺点：超出的部分会隐藏。

2.浮动元素下增加 clear：both;

.son{
    clear:both;
 }

缺点：易造成页面结构混乱。

3. 伪元素after

.clearfix::after {
  content: ''; //设置内容为空
   height: 0; //高度为0
   line-height: 0; //行高为0
   display: block; //将文本转块状
   visibility: hidden; //将元素隐藏
   clear: both; //清除浮动
}
.clearfix {
  zoom: 1; //兼容IE
}

常用的清除浮动方式，推荐使用！！！！！

4.双伪元素before,after

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

缺点：第三种方法的改良版，写法不严谨