亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        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” class=fl ret>
            <h2>left</h2>
            </div>
            <div id=”son2 class=fr ret >
            <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” class=fl ret>
            <h2>left</h2>
            </div>
            <div id=”son2 class=fr ret >
            <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ù)期效果。