前端开发-清除浮动的终极解决方案

<div class="clear">
    <div style="float:left；">float left</div>
    <div >...</div>
</div>
<div>随便写的一些内容，为了对比清除浮动带来的影响</div>

方法一：使用clear：both清楚浮动

先说使用最多的，也是最推荐的方案兼容IE：
.clear{
　　zoom: 1;
}

.clear::after{
　　clear: both; // 清除浮动
　　content: ""; // 增加一个空内容
　　display: block; // 设置为块级元素独占一行
　　height: 0; // 避免::after有高度
　　width: 0; // 避免::after有宽度
　　visibility: hidden; // 允许浏览器渲染它，但是不显示出来
}

也可以这样写
.clear {
    clear: both;
}

方法二：使用overflow属性：

.clear {
    overflow: auto; //或者 hidden 属性
}

方法三：设置zoom属性：

.clear {
    zoom：1; // IE独有
}