這篇文章主要講解了“CSS clear both清除浮動有什么作用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS clear both清除浮動有什么作用”吧！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供鄉(xiāng)寧網(wǎng)站建設(shè)、鄉(xiāng)寧做網(wǎng)站、鄉(xiāng)寧網(wǎng)站設(shè)計、鄉(xiāng)寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鄉(xiāng)寧企業(yè)網(wǎng)站模板建站服務(wù)，10余年鄉(xiāng)寧做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

 一、前言

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

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

1. clear語法

clear : none | left|right| both

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

3. clear解釋

該屬性的值指出了不允許有浮動對象的邊情況，對象左邊不允許有浮動、右邊不允許有浮動、不允許有浮動對象。

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

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

三、div clear常用的情況

最常用是使用clear:both清除浮動。

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

四、案例

1. 案例說明

設(shè)置一個css寬度(css width)為500px; 盒子(div )，css邊框(css border)為紅色，css背景(css  background)為黑色、css padding為10px盒子，里面包裹著2個小盒子，一個css 浮動靠右(float:right)、一個css  float靠左(float:left)，兩者邊框為白色，背景顏色為灰色，寬度為200px，css高度、css height為150px。

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

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注釋：這里為了截圖分別，對css代碼換行 */              .div  css5_left {                 float: left             }             /* css注釋：設(shè)置浮動靠左 */              .div  css5_right {                 float: right             }             /* css注釋：設(shè)置浮動靠右 */

html代碼片：

             float left盒子             float right盒子