清除元素浮动的四种方式

前言

最近自己在写个网页 城墙墨の小破站，遇到了关于float实现元素横向排列及清除浮动影响问题，在这里整理记录一下。

定义float

float元素可以定义元素浮动显示

float: left | right | none

利用浮动，使元素横向排列

设置4个横向排列的item，代码如下：

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

.item{
    width: 125px;
    height: 165px;
    float: left;
}

利用float就能使这几个div横着排列

清除元素浮动影响（四种方式）

由于元素浮动后不占据空间，在.item下面在设置div块级元素时就会被浮动的.item所遮挡即高度塌陷，所以这个时候就需要清除元素浮动影响,有种以下四种方法

1.clear清除元素浮动影响

clear: left | right | both

在浮动元素后再设置个标签，css样式设置为clear: both;

即在父容器底部添加了一个非浮动元素，这样父元素就把所有元素包括在内了

<div id="category">
    <div class="item first"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item last"></div>

    <div style="clear:both;"></div>
</div>

2.为父级元素设置overflow:不为visible,通过触发BFC的方式清除浮动;

在浮动的元素的外面套个div盒子，例如如下在.item外面套个#category,css设置为overflow：auto

<div id="category">
    <div class="item first"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item last"></div>
</div>

#category {
    overflow: auto;    
    background-color:brown;
    margin: auto;
}

#category .item{
    width: 125px;
    height: 165px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    border-right: 1px dashed black;
    float: left;
}

###

3.使用after伪元素清除浮动

.clearfix:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; 
}
.clearfix {
    *zoom: 1;   /*zoom 1 是IE6清除浮动的方式 * IE6、7读取  */
}

该样式在clearfix,即父级元素的最后,添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父级元素高度的目的.该伪元素的display为block,即是一个不可见的块级元素,所以就是clear both的另一种写法

4.使用before和after双伪元素

.clearfix:before ,.clearfix:after {
    content: "";
    display: table;    /*这句话可以触发BFC*/
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}