CSS clear屬性給float帶來哪些影響

    Ok， 下面舉例說明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來哪些影響：
    HTML片段一：
    代碼如下:
    #parentDiv
    {
    background: #00ff00;
    }
    .ret
    {
    width: 100px;
    height: 200px;
    background: #0000ff;
    }
    .fl
    {
    float: left;
    }
    .fr
    {
    float: right;
    }
    <div id="parentDiv">
    <div id=“son1”>
    <h2>Left</h2>
    </div>
    <div id=”son2" >
    <h2>Right</h2>
    </div>
    </div>
    效果：由于float導(dǎo)致兩個子DIV(#son1, #son2)不占文檔流，所以雖然兩個子DIV的高為200PX，但是父DIV#parentDiv的高度是0PX。
    問題：有時候我們需要父DIV的高度正好容納下所有的子DIV。在這種情況下我們可以使用clear屬性了。
    HTML片段二：在HTML片段一的基礎(chǔ)上添加CSS class：clear，給父DIV添加個子DIV（#son3）
    代碼如下:
    #parentDiv
    {
    background: #00ff00;
    }
    .ret
    {
    width: 100px;
    height: 200px;
    background: #0000ff;
    }
    .fl
    {
    float: left;
    }
    .fr
    {
    float: right;
    }
    .clear
    {
    clear: both;
    }
    <div id="parentDiv">
    <div id=“son1”>
    <h2>Left</h2>
    </div>
    <div id=”son2" >
    <h2>Right</h2>
    </div>
    <div id="son3" class=“clear”>
    </div>
    </div>
    效果：這種情況下父DIV的高度是200PX（和子DIV中最高的高度一樣）。
    分析：
    子DIV（#son3）使用了clear屬性，這樣其上外邊框在float元素（#son1，#son2）下外邊框的下面，因?yàn)樽覦IV#son3要占文檔流，所以父DIV不得不增加高度來容納子DIV#son3，這樣也就達(dá)到了預(yù)期效果。