清除浮动的三种方式

浮动元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式，大致有以下三种，他们之间的区别也会大概说一下。

先写个html代码结构:  

<div class="layout">

    <div class="son1  box"></div>

   <div class="son2 box"></div>

</div>

写一下css样式

.layout{border:1px solid black;background：yellow}

.box{width:100px;height:100px;background:green;}

.son1{float:left;}

.son2{float:right}

如果我们不给最外面父级元素.layout设置高度，而里面的子元素浮动的话，那么父级元素高度无法被撑开，背景颜色无法显示等等；同理，如果子元素不浮动，父元素的高就可以被撑开。那么就来解决以下该问题。

方法一：在父级元素里增加一个新的元素，比如<div class="clear"></div>,其属性为clear：both;

方法二：给父级添加一个属性：overflow：hidden;（或者overflow：auto）两者都可以达到清除浮动的效果，但是前者比较常用。

方法三：写一个伪类，：after 和 ：before 方式；在父级元素里写,再给父元素增加class名<div class="layout  clearfix">

现在写一下清除浮动的代码

.clearfix{

zoom:1;    //这个zoom:1 是为了处理兼容问题

}

.clearfix : after{

display: block;

content: " ";

clear: both;

}

这种方式相对来说是清除浮动比较好的方式，其原理和clear：both差不多。以上三种方式的区别在于方法一 clear:both造成了代码的冗余且不贴合，而方法二它还有一层含义是“超出部分隐藏”，会带来一些问题，方法三还是比较实用的，只是增加了个伪类，就是实现清除浮动的效果。