2011年8月16日 星期二

【CSS】使用float導致父容器未正常展開之解決

一般使用 float 來浮動元件的時候會把下一個未 float 的元件吸上來並以之撐開父容器。
<h3>
    <span style="float:left;">
        <img alt="最新消息" src="Images/volume.png" />
        最新消息
    </span>
    <span>x</span>
</h3>

但要是父容器中所有的元件都設定有 float 呢? 比如我們把裝有x的span拿掉,這時候失去支撐的父容器就無法正常展開。
<h3>
    <span style="float:left;">
        <img alt="最新消息" src="Images/volume.png" />
        最新消息
    </span>
</h3>