因为浮动会导致元素脱离标准流，导致其父元素出现一些看上去比较异常的现象。所以这里是几种防止浮动导致父元素表现异常的方法。

额外标签法

其实就是在容纳浮动的容器的最后添加一个具有clear属性的块级元素，如:

1
2
3
4
5
6
7
8
9

<div id="main_d">
    <div id="hd_box">
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div style="clear:both;"></div>
    </div>
</div>

其中ud_b是加了左浮动的盒子。”hd_box”中的最后一个元素指定了”clear”属性，其作用是指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

给父元素添加overflow属性

给父元素添加overflow属性，就拿上面的代码来说，在id “main_d”中添加一条”overflow:hidden”就好。
不过这个方法有个缺点，就是无法显示溢出部分。

添加after伪类元素

先定义一个类:

1
2
3
4
5
6
7
8
9
10
11

.clearfix{
    /* IE6, 7 only */
    *zoom: 1;
}
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

然后把”clearfix”这个类添加给父元素。
因为after是在使用该类的元素后面加一个内容，我们又把添加的这个内容设置成了block，即块元素，并对其添加了clear属性。所以这个方法其实相当于”额外标签法”。

双伪元素清除

1
2
3
4
5
6
7
8
9
10
11
12

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

这个方法和上面那个方法类似，但是你若问我为啥display是table而不是block，我只能回答你我也不知道为啥，但是block也是能用的。然而我看的教程里写的就是table,也没有解释为什么，所以我就只能当作”block在某些情况下也许有bug”处理。

本篇完。