浮動造成的影響: 子元素浮動,父元素無法被撐出高了.

• 如果要給父元素做通欄background?
• 如果兩個box的子元素都浮動,且希望兩個box分行顯示?

box1 box2 box3: float:left, 則box自己的高度就沒辦法被撐開了

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
 

現實案例: 需要給父盒子做通欄背景圖

現子元素浮動,父元素沒高度了,沒法加了.

<div class="content">
    <div class="ad "></div>
    <div class="news"></div>
</div>

現實案例: 盒子需要分兩排顯示

子元素浮動,2個父元素都沒高度,所以連個父元素的子元素都並排顯示了, 沒辦法分行顯示

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            width: 100px;
            text-align: center;
            background: yellowgreen;
        }
    </style>

    
<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</div>

<div class="box2">
    <ul>
        <li>學習方法</li>
        <li>英語水平</li>
        <li>面試技巧</li>
    </ul>
</div>
 

按理說2個box,分行顯示沒問題,但此時這兩個box的子box發生了浮動, 發生浮動的子元素無法撐開父box, 導致兩個父box的內容並排顯示了.

給box2設置10px的border如圖

[css]浮動造成的影響