怎么在css中使用clearfix和clear清除浮動?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比郴州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式郴州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋郴州地區(qū)。費用合理售后完善,十年實體公司更值得信賴。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>
我們都知道使用浮動會產(chǎn)生很多未知的問題,通過上面的例子我們可以發(fā)現(xiàn) class="demo" 的高度并沒有被里面的 div 給撐開,這是因為里面的 div 產(chǎn)生浮動而脫離了該文檔,因為 demo 本身沒有高度,所以我們看不到它的灰色背景。當(dāng)然只要給 demo 一個高度就行了,但是這就脫離了本文的目的(有時我們希望外層 div 的高度由里面的內(nèi)容來決定)。
既然是浮動產(chǎn)生的問題,那么只要清除浮動就可以了,相信高手們有很多清除浮動的方法,比如 overflow:hidden。下面我將介紹用 clearfix 和 clear 來清除浮動。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<h3>用 clear 清除浮動</h3>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
<div class="clear"></div>
</div>
<h3>用 clearfix 清除浮動</h3>
<div class="clearfix demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
分享標(biāo)題:怎么在css中使用clearfix和clear清除浮動
網(wǎng)站URL:http://www.muchs.cn/article24/gehcce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)、、品牌網(wǎng)站制作、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)