問題
當div內部巢狀多個div，內部div設定浮動時，父級div的高度受影響，無法計算，外層div會變成一條水平線!
程式碼結構如下：

<div class="outer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

如圖所示：

解決方法1：

在內層div的後面新增一個div，清除浮動

<div class="outer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- 新增-->
    <div style="clear:both"></div> 
</div>

解決方法2：

給父元素新增一個屬性overflow:hidden;

<div class="outer" style="overflow:hidden;"> <!--修改-->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

效果圖