日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解CSSclearboth清除浮動(dòng)

 一、前言

創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、微信小程序開發(fā)、網(wǎng)站運(yùn)營為一體的建站企業(yè)；在網(wǎng)站建設(shè)告別千篇一律，告別似曾相識(shí)，這一次我們重新定義網(wǎng)站建設(shè)，讓您的網(wǎng)站別具一格。響應(yīng)式網(wǎng)站開發(fā)，實(shí)現(xiàn)全網(wǎng)營銷！一站適應(yīng)多終端，一樣的建站，不一樣的體驗(yàn)！

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語法

 
 
 
 
    
  
  
  
  
  1. clear : none | left|right| both 
    2.

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

3. clear解釋

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

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

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.                 clear: left 
    3. 
  
  
  
  
  3.             } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.             div { 
    6. 
  
  
  
  
  6.                 clear: right 
    7. 
  
  
  
  
  7.             } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.             div { 
    10. 
  
  
  
  
  10.                 clear: both 
    11. 
  
  
  
  
  11.             } 
    12.

三、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代碼：

 
 
 
 
    
  
  
  
  
  1. .div css5 { 
    2. 
  
  
  
  
  2.                 width: 500px; 
    3. 
  
  
  
  
  3.                 background: #000; 
    4. 
  
  
  
  
  4.                 border: 1px solid #F00; 
    5. 
  
  
  
  
  5.                 padding: 10px 
    6. 
  
  
  
  
  6.             } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.             .div  css5_left, 
    9. 
  
  
  
  
  9.             .div  css5_right { 
    10. 
  
  
  
  
  10.                 border: 1px solid #FFF; 
    11. 
  
  
  
  
  11.                 background: #999; 
    12. 
  
  
  
  
  12.                 width: 200px; 
    13. 
  
  
  
  
  13.                 height: 150px 
    14. 
  
  
  
  
  14.             } 
    15. 
  
  
  
  
  15.             /* css注釋：這里為了截圖分別，對(duì)css代碼換行 */ 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.             .div  css5_left { 
    18. 
  
  
  
  
  18.                 float: left 
    19. 
  
  
  
  
  19.             } 
    20. 
  
  
  
  
  20.             /* css注釋：設(shè)置浮動(dòng)靠左 */ 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.             .div  css5_right { 
    23. 
  
  
  
  
  23.                 float: right 
    24. 
  
  
  
  
  24.             } 
    25. 
  
  
  
  
  25.             /* css注釋：設(shè)置浮動(dòng)靠右 */ 
    26.

html代碼片：

  
 
 
 
    
   
  
  
  
  1.  
    2. 
   
  
  
  
  2.             float left盒子 
    3. 
   
  
  
  
  3.             float right盒子 
    4. 
   
  
  
  
  4.         
 

 案例效果截圖

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

在css代碼中加入CSS代碼：

 
 
 
 
    
  
  
  
  
  1. .clear{ clear:both} 
    2.

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

 清除浮動(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í)。


當(dāng)前標(biāo)題：一篇文章帶你了解CSSclearboth清除浮動(dòng)
網(wǎng)站鏈接：http://www.5511xx.com/article/dpojcec.html