【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: 第十六課 div css當(dāng)中 到底該如何清除DIV的左右浮動(dòng)詳解教程 [打印本頁(yè)]
作者: asp老師    時(shí)間: 2014-12-4 15:06
標(biāo)題: 第十六課 div css當(dāng)中 到底該如何清除DIV的左右浮動(dòng)詳解教程
本帖最后由 asp老師 于 2014-12-4 15:30 編輯

上一節(jié)課程，我們學(xué)習(xí)了float的具體知識(shí)，那么我們現(xiàn)在來(lái)看這個(gè)浮動(dòng)的div如何清楚，新建一個(gè)16.html文件和16.css的文件。并且我們把這個(gè)16.css的文件引入我們的16.html的代碼當(dāng)中，那么16.html的代碼如下：
  1. <font size="3"><body>
  2. <div class="aaa">111</div>
  3. <div class="bbb">222</div>
  4. <div class="ccc">333</div>


  7. </body></font>
復(fù)制代碼


css代碼如下：

  1. <font size="3">.aaa{width:350px; height:150px; background:#F00; float:left; }
  2. .bbb{width:400px; height:150px; background:#0F0;float:left; }
  3. .ccc{width:50px; height:300px; background:#00C;}</font>
復(fù)制代碼
效果如下：
(, 下載次數(shù): 303)
我們來(lái)分析一下，這個(gè)第一個(gè).aaa和第二個(gè).bbb的都設(shè)置了左面浮動(dòng)，都到了云霄殿，但是還是要拍著隊(duì)，所以.bbb仍然在.aaa的后面！
之后呢，我們繼續(xù)來(lái)看；.ccc因?yàn)闆](méi)有浮動(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ì)我沒(méi)有作用）
那么我在這個(gè).ccc添加一個(gè)清除浮動(dòng)的代碼如下；
  1. clear:left;
復(fù)制代碼
具體代碼如下：
  1. .aaa{width:350px; height:150px; background:#F00; float:left; }
  2. .bbb{width:400px; height:150px; background:#0F0;float:left; }
  3. .ccc{width:50px; height:300px; background:#00C; clear:left;}
復(fù)制代碼


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

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







歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4