CSS清除浮动float

新收一个清除浮动的方法，就给它的父元素加上个class比如我们给它取名clearfix，然后给它设置属性

.clearfix:before,
.clearfix:after{content:".";height:0;display:block;line-height:0;visibility:hidden; clear:both;}

OK，解决，so easy

 

 

下面摘自https://segmentfault.com/a/1190000004237437

---

我们都知道当内层元素浮动后，就出现了以下影响：

（1） 背景不能显示 （2） 边框不能撑开 （3） margin 设置值不能正确显示

这个时候为了不让元素们重叠，我们就要清除浮动。

方法一：添加新的元素 、应用 clear：both；

HTML：

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

 

方法二：父级div定义 overflow: auto

HTML：

<div class="outer"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

CSS：

.outer{
    overflow: auto; zoom: 1; /*zoom: 1; 是在处理兼容性问题*/
}

 

方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父元素）

 

先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，
从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而
outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

　CSS：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
 .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

 

 其中clear:both;指清除所有浮动；content: '.';display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）
 可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

　　

下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;
 这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。