浮动元素遇到标准流元素 会发生转角遇到爱

 你遇到过这种问题吗？

好比一共有几个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  单伪类  和双伪元素  也是这么个意思 

你想一想？