一篇文章帶你了解CSS clear both清除浮動(dòng)

點(diǎn)擊上方“IT共享之家”，進(jìn)行關(guān)注

回復(fù)“資料”可獲贈(zèng)Python學(xué)習(xí)福利

一、前言

CSS clear both清除產(chǎn)生浮動(dòng) ，使用了css float浮動(dòng)會(huì)產(chǎn)生css浮動(dòng)，這個(gè)時(shí)候就需要清理清除浮動(dòng)，就用clear樣式屬性即可實(shí)現(xiàn)。

二、clear語法與結(jié)構(gòu)

1. clear語法

clear : none | left|right| both

2. clear參數(shù)值說明

3. clear解釋

該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊情況，對(duì)象左邊不允許有浮動(dòng)、右邊不允許有浮動(dòng)、不允許有浮動(dòng)對(duì)象。

4. css結(jié)構(gòu) ? ? ?

div {                clear: left            }
            div {                clear: right            }
            div {                clear: both            }

三、div ? ?clear常用的情況

最常用是使用clear:both清除浮動(dòng)。

比如一個(gè)大對(duì)象內(nèi)有2個(gè)小對(duì)象使用了css float樣式為了避免產(chǎn)生浮動(dòng)，大對(duì)象背景或邊框不能正確顯示，這個(gè)時(shí)候就需要clear:both清除浮動(dòng)。

四、案例

1. 案例說明

設(shè)置一個(gè)css寬度（css width）為500px; ?盒子(div ? )，css邊框（css border）為紅色，css背景（css background）為黑色、css padding為10px盒子，里面包裹著2個(gè)小盒子，一個(gè)css 浮動(dòng)靠右（float:right）、一個(gè)css float靠左（float:left），兩者邊框?yàn)榘咨尘邦伾珵榛疑瑢挾葹?00px，css高度、css height為150px。

這樣來觀察案例效果，看浮動(dòng)產(chǎn)生并使用clear清除浮動(dòng)。

css代碼：

.div css5 {                width: 500px;                background: #000;                border: 1px solid #F00;                padding: 10px            }
            .div  css5_left,            .div  css5_right {                border: 1px solid #FFF;                background: #999;                width: 200px;                height: 150px            }            /* css注釋：這里為了截圖分別，對(duì)css代碼換行 */
            .div  css5_left {                float: left            }            /* css注釋：設(shè)置浮動(dòng)靠左 */
            .div  css5_right {                float: right            }            /* css注釋：設(shè)置浮動(dòng)靠右 */

html代碼片：

class="div css5">            
class="div css5_left">float left盒子            
class="div css5_right">float right盒子        

案例效果截圖

2. 清除浮動(dòng)方法

在css代碼中加入CSS代碼：

.clear{ clear:both}

Html代碼中“.div ? css5”盒子*結(jié)束標(biāo)簽前加入代碼：

class="clear">div>

清除浮動(dòng)效果圖：

五、總結(jié)

本文基于Html基礎(chǔ)，介紹了在實(shí)際開發(fā)中，可以使用clear可以清除float產(chǎn)生的浮動(dòng)。在使用clear樣式對(duì)象加入位置，只需要在此對(duì)象div標(biāo)簽結(jié)束前，加入即可清除內(nèi)部小盒子產(chǎn)生浮動(dòng)。而一般常用clear:both來清除浮動(dòng)。采用代碼加截圖的方式，希望能夠更好的幫助你學(xué)習(xí)。

看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人

IT共享之家

入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】

-------------------?End?-------------------

往期精彩文章推薦：

• 一篇文章教會(huì)你用Python抓取抖音app熱點(diǎn)數(shù)據(jù)
  

• 一篇文章教會(huì)你使用Python定時(shí)抓取微博評(píng)論
  

• 手把手教你使用Python抓取QQ音樂數(shù)據(jù)（第四彈）