CSS 清除浮動(dòng)元素方法整理

2024-07-11 08:45:21

字體：大中小

供稿：網(wǎng)友

例如：
<div style=”background:#666;”>
<div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
</div>
　　此時(shí)預(yù)覽此代碼，我們會發(fā)現(xiàn)最外層的父元素float container,并沒有顯示。這是因?yàn)樽釉匾蜻M(jìn)行了浮動(dòng)，而脫離了文檔流，導(dǎo)致父元素的height為零。
　　若將代碼修改為：

<div style=”background:#666;”>
<div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
<div style=”clear:both”></div>
</div>
　　注意，多了一段清理浮動(dòng)的代碼。這是一種好的CSS代碼習(xí)慣，但是這種方法增加了無用的元素。這里有一種更好的方法，將HTML代碼修改為：

<div class=”clearfix” style=”background:#666;”>
<div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
</div>
定義CSS類，進(jìn)行“浮動(dòng)清理”的控制：

復(fù)制代碼

上一篇：clip 剪裁矩形實(shí)現(xiàn)代碼

下一篇：common.css文件網(wǎng)頁設(shè)計(jì)常用的基本css控制