both實用(yòng)清除浮動網頁不(bù)錯(cuò)位

　　both實用(yòng)清除浮動網頁不(bù)錯±Ω∑(cuò)位。我們知(zhī)道(dào)有(yǒu)時(shí)使用(≥↕®yòng)了(le)cssfloat浮動會(huì)産¥‌≈€生(shēng)css浮動，這(zhè)個(gè)¥€時(shí)候就(jiù)需要(yào)清理(​ lǐ)清除浮動，我們就(jiù)用(yòπ∑ng)clear樣式屬性即可(kě)實現(xiàn)。

　　接下(xià)來(lái)我們來(lái)認識與學習(xí)cδ≤ssclear知(zhī)識與用(yòng)法。

　　clear清除浮動目錄

　　clear語法與結構

　　pclear常用(yòng)地(d≤£ì)方

　　css+p案例

　　DIVCSS5總結

　　一(yī)、clear語法與結構-TO  ♠ P

　　1、clear語法：

　　clear:none|left|right|Ω↕both

　　2、clear參數(shù)值說(shuō)明(mΩ≤íng)：

　　none:允許兩邊都(dōu)可(k☆☆↑ě)以有(yǒu)浮動對(duì)象

　　both:不(bù)允許有(yǒu)浮動對(duì)象

　　left:不(bù)允許左邊有(yǒu)浮動對(duì)象

　　right:不(bù)允許右邊有(yǒu)浮動對(duì)象&↓

　　3、clear解釋：

　　該屬性的(de)值指出了(le)不(Ω¶‌πbù)允許有(yǒu)浮動對(duì)象的(de)邊情況，又(yòu)對€↑₽★(duì)象左邊不(bù)允許有(yǒu)浮動、右邊不(bù)α≥₽允許有(yǒu)浮動、不(bù)允許有(yǒu)浮動對(duì)象。

　　4、css結構

　　p{clear:left}

　　p{clear:right}

　　p{clear:both}

　　二、pclear常用(yòng)地(dì)方-TOP

　　我們常常用(yòng)于使用(yòng)了(le)fl​✘oatcss樣式後産生(shēng)浮動，最常用∞♠(yòng)是(shì)使用(yòng)clear:•εβboth清除浮動。比如(rú)一(yī)個(gè♠")大(dà)對(duì)象內(nèi)有(yǒu)2個(gè)小(γ&xiǎo)對(duì)象使用(yòng)了(le)cssfl"↓oat樣式為(wèi)了(le)避免産生(shēn‍≤g)浮動，大(dà)對(duì)象背景或邊框不(bù)能(nén↔★£g)正确顯示，這(zhè)個(gè)時(shí)候我>☆←∏們就(jiù)需要(yào)clear:both清除浮動。

　　三、css+p案例-TOP

　　DIVCSS5案例說(shuō)明(m₩✘íng)：這(zhè)裡(lǐ)設置一(yī)個(gè)css寬度（csswi¶Ωdth）為(wèi)500px;盒子(zǐ)，css¶±邊框（cssborder）為(wèi)紅(hóng)色，css¶  ♦背景（cssbackground）為(wèi₽α)黑(hēi)色、csspadding為(wèi)10px盒子(zǐ)，裡(l✔£✘ǐ)面包裹著(zhe)2個(gè)小(xiǎo)盒™"∏♣子(zǐ)，一(yī)個(gè)css浮動靠右（flβ↓δoat:right）、一(yī)個(gè)cssf®↓‍€loat靠左（float:left）,兩者邊框為(wèi)白λ¥π(bái)色，背景顔色為(wèi)灰色,寬度為(wèi)200px,cs→×≤‌s高(gāo)度(cssheight)為(wèi)150✘<px。這(zhè)樣我們來(lái)觀察案例效果，看(kàn)浮✘♣ 動産生(shēng)并使用(yòng)clear清≠​∏除浮動。

　　1、案例css代碼：

　　.pcss5{width:500px;backgro$¶ε±und:#000;border:1pxsolid#F00;pad₩∑ding:10px}

　　.pcss5_left,.pcss5_right{

　　border:1pxsolid#FFק×F;background:#999;wi₩εdth:200px;height:150px

　　}

　　/*css注釋：這(zhè)裡(lǐ)為(wèiα")了(le)截圖分(fēn)别，對(duì♦≥ε£)css代碼換行(xíng)*/

　　.pcss5_left{float:le™¥≤♥ft}/*css注釋：設置浮動靠左*/

　　.pcss5_right{float:right}/*css注釋：設"✘₽置浮動靠右*/

　　2、案例html代碼片段：

　　floatleft盒子(zǐ)

　　floatright盒子(zǐ)

　　3、案例效果截圖

　　cssp浮動産生(shēng)與清除案例截圖>δε

　　這(zhè)個(gè)時(shí)候♠"£∞需要(yào)clear來(lái)清除浮>ε®動，讓css命名為(wèi)“pcss5”盒子≥<(zǐ)撐開(kāi)。

　　4、清除浮動方法

　　我們在css代碼中加入CSS代碼：★©←≈

　　.clear{clear:both}

　　Html代碼中“.pcss5”盒子(zǐ​≈)

　　最終使用(yòng)pcssclear清≥₽除浮動後應用(yòng)用(yòng)法案例截圖

　　Clear使用(yòng)用(yòng)÷←™法案例截圖

　　擴展閱讀(dú)：CSS清除float浮動™$技(jì)巧

　　四、DIVCSS5總結-TOP

　　使用(yòng)clear可(kě)以清除f♠δ∞loat産生(shēng)的(de)浮動，注意cle↔÷₽§ar樣式對(duì)象加入位置，如(rú)上(sh‌∏àng)案例對(duì)“.pcss5&rd∏ε ✔quo;清除浮動，我們就(jiù)隻需要(yào)在此對(duì)象↔<±←p标簽結束前加入即可(kě)清除內(nèi)∑₹≠↓部小(xiǎo)盒子(zǐ)産生(shēng)浮動。而一(yī)般常用(y©<≤→òng)clear:both來(lái)γ£ε‍清除浮動，其它clear:left和(hé)cφ λlear:right可(kě)以下(xià)來(l≥☆←ái)根據clearboth案例擴展學習(xí)實踐。