日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

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

 一、前言

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

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

二、clear語法與結構

1. clear語法

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

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

3. clear解釋

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

4. css結構

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

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

四、案例

1. 案例說明

設置一個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。

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

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注釋：這里為了截圖分別，對css代碼換行 */ 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.             .div  css5_left { 
    18. 
  
  
  
  
  18.                 float: left 
    19. 
  
  
  
  
  19.             } 
    20. 
  
  
  
  
  20.             /* css注釋：設置浮動靠左 */ 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.             .div  css5_right { 
    23. 
  
  
  
  
  23.                 float: right 
    24. 
  
  
  
  
  24.             } 
    25. 
  
  
  
  
  25.             /* css注釋：設置浮動靠右 */ 
    26.

html代碼片：

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

 案例效果截圖

2. 清除浮動方法

在css代碼中加入CSS代碼：

 
 
 
 
    
  
  
  
  
  1. .clear{ clear:both} 
    2.

Html代碼中“.div css5”盒子*結束標簽前加入代碼：
 

 清除浮動效果圖：

五、總結

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


當前名稱：一篇文章帶你了解CSSclearboth清除浮動
文章出自：http://www.dlmjj.cn/article/dpojcec.html