css小结：清除float带来的影响

在你使用float属性进行页面布局的时候：例如：

<div class="container">
    <div class="div1" id="box"></div>
    <div class="div2" id="box"></div>
    <div class="div3" id="box"></div>
    <div class="div4" id="box"></div>
</div>

添加css属性：

.container {   //因为要通过box撑起container的高度，所以这里不设置height
    width: 300px;
    border: 1px solid black;
    background-color: rebeccapurple;
}

#box {
    float: left;
    width: 140px;
    height: 50px;
}
 .div1 {
    background-color: red;
}

.div2 {
    background-color: blue;
}

.div3 {
    background-color: green;
}

.div4 {
    background-color: pink;
}

以上代码在页面的显示结果：

当你不知道container里面有多少个box和想要通过box的高度撑起container的高度的时候，你就不能把container的高度写死。这时候你就发现，box根本撑不起container的高度，因为没有高度，所以页面显示的只有container的黑色边框线。

当你在container后面还要添加div的时候：

<div class="container">
        <div class="div1" id="box"></div>
        <div class="div2" id="box"></div>
        <div class="div3" id="box"></div>
        <div class="div4" id="box"></div>
    </div>
    <div class="container2"></div>

为container2添加css属性：

.container2 {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

这时候页面的显示情况：

黄色的container2盒子的位置和你想象的就不太一样。因为第一个container盒子并没有高度，所以就出现这种情况。
如果你想要黄色的container2盒子不和container中的子盒子重叠在一起，这个时候，你就要清除浮动带来的影响。

方法1：清除浮动带来的影响

1.为container盒子添加clearfix类

<div class="container clearfix"> 
        <div class="div1" id="box"></div>
        <div class="div2" id="box"></div>
        <div class="div3" id="box"></div>
        <div class="div4" id="box"></div>
    </div>
    <div class="container2"></div>

2.为clearfinx书写css样式

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

这样就container盒子（紫色部分）就有了高度，黄色的container2盒子就不会重叠在一起了!

方法二：为浮动的父盒子添加overflow：hidden属性

.container {
            width: 300px;
            border: 1px solid black;
            background-color: rebeccapurple;
            overflow: hidden;
        }

这样的效果也是和上面一样的

方法三：在container中，在最后面那里添加一个div盒子

1.添加div盒子

<div class="container">
        <div class="div1" id="box"></div>
        <div class="div2" id="box"></div>
        <div class="div3" id="box"></div>
        <div class="div4" id="box"></div>
        <div class="clear"></div>  //添加div盒子
    </div>
    <div class="container2"></div>

2.书写clear类样式

.clear {
            width: 0;
            height: 0;
            clear: both;
        }

结果如上：