css別忘記清除浮動(dòng)clear:both
更新時(shí)間:2008年03月30日 12:44:34 作者:
總結(jié)下清除浮動(dòng)的一般解決方案,做網(wǎng)頁(yè)時(shí)要注意
用空標(biāo)簽清除
.clr {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
使用 overflow 屬性
#layout {overflow:auto; zoom:1;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
使用 :after (非 IE 瀏覽器)
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>注:使用 :after 需要注意幾點(diǎn),設(shè)置高度為零(height: 0;);content 是必須的,但其值可以為空
.clr {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
使用 overflow 屬性
#layout {overflow:auto; zoom:1;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
使用 :after (非 IE 瀏覽器)
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>注:使用 :after 需要注意幾點(diǎn),設(shè)置高度為零(height: 0;);content 是必須的,但其值可以為空
相關(guān)文章
Internet Explorer 8 beta 中文版與IE7共存的解決方法
今天安裝了IE8,去微軟網(wǎng)站下載的時(shí)候發(fā)現(xiàn)已經(jīng)提供中文版的beta了,哈哈 發(fā)現(xiàn)IE8沒有傳說中的那么妖魔化,不錯(cuò)的瀏覽器,新增功能不錯(cuò)。2008-05-05解析IE, FireFox, Opera 瀏覽器支持Alpha透明的方法
解析IE, FireFox, Opera 瀏覽器支持Alpha透明的方法...2006-12-12div+css布局必須要知道的css條件注釋理論及實(shí)踐
div+css布局必須要知道的css條件注釋理論及實(shí)踐...2007-05-05談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)中的字體應(yīng)用Font Set
最近有不少人都提及了網(wǎng)頁(yè)上該如何選擇字體的問題。問題雖然小,但是卻是前端開發(fā)中的基本,因?yàn)槟壳暗木W(wǎng)頁(yè),還是以文字信息為主,而字體,作為文字表現(xiàn)形式的最重要參數(shù)之一,自然有著相當(dāng)重要的地位。2008-09-09div+CSS網(wǎng)頁(yè)布局的意義與副作用原因小結(jié)
隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及,國(guó)內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法,從實(shí)際應(yīng)用情況來看,此種方法絕對(duì)好于表格制作頁(yè)面的方法。2008-09-09