一個元素的css設置了浮動（float），會影響到他下面的元素，使html頁面顯示達不到預期的效果，下面介紹幾種值得推薦的有效清除浮動的方法。

方法一：在設置浮動元素的後面新增一個div,將其設置成clear:both

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <div class="clearfloat"></div>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.clearfloat{
    clear: both;
}


方法二：在設置浮動元素的後面新增一個br,將其設置成clear:both

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <br class="clearfloat"/>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.clearfloat{
    clear: both;
}
方法三：將父元素的overflow設為隱藏
例：

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.top_content{margin:0 auto;width:1000px;overflow: hidden}

清除css浮動問題