3天0基礎(chǔ)建站課程

[DIV+CSS 教程筆記02] 第十六課 div css當(dāng)中到底該如何清除DIV的左右浮動(dòng)詳解教程

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會(huì)員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2014-12-4 15:06:09 | 只看該作者 |只看大圖回帖獎(jiǎng)勵(lì)

|倒序?yàn)g覽 |閱讀模式

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號(hào)？立即注冊(cè)

本帖最后由 asp老師于 2014-12-4 15:30 編輯

上一節(jié)課程，我們學(xué)習(xí)了float的具體知識(shí)，那么我們現(xiàn)在來看這個(gè)浮動(dòng)的div如何清楚，新建一個(gè)16.html文件和16.css的文件。并且我們把這個(gè)16.css的文件引入我們的16.html的代碼當(dāng)中，那么16.html的代碼如下：

<font size="3"><body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
</body></font>

復(fù)制代碼

css代碼如下：

<font size="3">.aaa{width:350px; height:150px; background:#F00; float:left; }
.bbb{width:400px; height:150px; background:#0F0;float:left; }
.ccc{width:50px; height:300px; background:#00C;}</font>

復(fù)制代碼

效果如下：

我們來分析一下，這個(gè)第一個(gè).aaa和第二個(gè).bbb的都設(shè)置了左面浮動(dòng)，都到了云霄殿，但是還是要拍著隊(duì)，所以.bbb仍然在.aaa的后面！
之后呢，我們繼續(xù)來看；.ccc因?yàn)闆]有浮動(dòng)所以頂了上去，但是呢，它的高度很高，被第一個(gè).aaa的div遮擋了一部分，那么這個(gè)就是float的應(yīng)用，
那么這樣呢，如果我們被遮擋住的部分我們是有內(nèi)容的，想要把這個(gè)內(nèi)容展示給大眾看，被.aaa的div給遮擋住了，這樣是不是好悲催�。�---想想我們現(xiàn)在該怎么辦？思考一分鐘------
好，那么我們?cè)谶@個(gè)第三個(gè).ccc的div當(dāng)中我們?cè)O(shè)置一個(gè)清除浮動(dòng)-（清除浮動(dòng)的意識(shí)就是讓上面的浮動(dòng)效果對(duì)我沒有作用）
那么我在這個(gè).ccc添加一個(gè)清除浮動(dòng)的代碼如下；

clear:left;

復(fù)制代碼

具體代碼如下：

.aaa{width:350px; height:150px; background:#F00; float:left; }
.bbb{width:400px; height:150px; background:#0F0;float:left; }
.ccc{width:50px; height:300px; background:#00C; clear:left;}

復(fù)制代碼

這個(gè)就表示清楚左側(cè)的浮動(dòng)，讓左側(cè)浮動(dòng)的效果對(duì).ccc 的div沒有作用！那么這樣呢，我們此時(shí)的.ccc的div的全部效果就會(huì)顯示出來，我們來看下這個(gè)效果

那么這個(gè)就是呢關(guān)于這個(gè)clear:right; clear:left; clear:both;的一種應(yīng)用效果

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒問題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！