浮動元素遇到標準流元素 會發生轉角遇到愛

 你遇到過這種問題嗎？

好比一共有幾個div是浮動的    可是它遇到了標準流的一個div 而後就發生問題了

但是並不知道問題是怎麼產生的

 

eg:html

    <div class="box">
         
        <div class="test">11111111</div>
        <div class="test">22222222</div>
        <div class="test">33333333</div>
        <div>8</div>
        <div class="test">44444444</div>
        <div class="test">55555555</div>

    </div>

 

css:

 .test{ float:left; background: red; margin-right:10px; }

 

what?  不是說好的浮動的元素找浮動的元素嗎？

它怎麼換行了？

因而我又測試了幾次

這個現象我就問你熟不熟悉？？

這不至關因而clear:both 的做用嗎

緊挨着標準流的那個元素  經過改變本身的位置而拒絕跟標準流的元素站一排

你用這句話  去看看上面的現象  就知道了

 

因此既然知道了這個現象

那麼就能夠達到浮動元素換行的做用啦

.test{ float:left; background: red; margin-right:10px; } .wall{ width: 30px; height: 30px; }

    <div class="box">
        

        <div class="test">11111111</div>
        <div class="wall"></div>
        <div class="test">22222222</div>
         <div class="wall"></div>
        <div class="test">33333333</div>
         <div class="wall"></div>
        <div class="test">44444444</div>
         <div class="wall"></div>
        <div class="test">55555555</div>


    </div>

經過改變wall的高度  會發生頗有意思的事情  想不想知道？

 

把height改爲20px;

 

你若是用其餘方法寫這個 確定麻煩的多吧？？

 

由此可知道 之前學的什麼內牆法  外牆法  

清除浮動

就是這個意思唄

clearfix  單僞類  和雙僞元素  也是這麼個意思 

你想一想？