ag电子竞技俱乐部成员|ag电子竞技女
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > DIV+CSS基礎 >

DIV+CSS clear both清除產生浮動

我們知道有時使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現。

接下來我們來認識與學習css clear知識與用法。

clear清除浮動目錄
  1. clear語法與結構
  2. div clear常用地方
  3. css+div案例
  4. DIVCSS5總結

一、clear語法與結構   -   TOP

1、clear語法:
clear : none | left|right| both

2、clear參數值說明:
none :  允許兩邊都可以有浮動對象
both :  不允許有浮動對象
left :  不允許左邊有浮動對象
right :  不允許右邊有浮動對象

3、clear解釋:
該屬性的值指出了不允許有浮動對象的邊情況,又對象左邊不允許有浮動、右邊不允許有浮動、不允許有浮動對象。

4、css結構
div{clear:left}
div{clear:right}
div{clear:both}

二、div clear常用地方   -   TOP

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

三、css+div案例   -   TOP

DIVCSS5案例說明:這里設置一個css寬度css width)為500px;盒子,css邊框css border)為紅色,css背景css background)為黑色、css padding為10px盒子,里面包裹著2個小盒子,一個css 浮動靠右(float:right)、一個css float靠左(float:left),兩者邊框為白色,背景顏色為灰色,寬度為200px,css高度(css height)為150px。這樣我們來觀察案例效果,看浮動產生并使用clear清除浮動。

1、案例css代碼

  1. .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px} 
  2. .divcss5_left,.divcss5_right{ 
  3. border:1px solid #FFF;background:#999;width:200px;height:150px 
  4. /* css注釋: 這里為了截圖分別,對css代碼換行 */ 
  5. .divcss5_left{ float:left}/* css注釋: 設置浮動靠左 */ 
  6. .divcss5_right{ float:right}/* css注釋:設置浮動靠右 */ 

2、案例html代碼片段:

  1. <div class="divcss5"> 
  2.     <div class="divcss5_left">float left盒子</div> 
  3.     <div class="divcss5_right">float right盒子</div> 
  4. </div> 

3、案例效果截圖

float浮動產生與清除案例截圖
css div浮動產生與清除案例截圖

這個時候需要clear來清除浮動,讓css命名為“divcss5”盒子撐開。

4、清除浮動方法

我們在css代碼中加入CSS代碼:

  1. .clear{ clear:both} 

Html代碼中“.divcss5”盒子</div>結束標簽前加入代碼:

  1. <div class="clear"></div> 

最終使用div css clear清除浮動后應用用法案例截圖

使用clear清除浮動案例截圖圖文分析
Clear使用用法案例截圖

擴展閱讀CSS清除float浮動技巧 http://www.sjiru.tw/jiqiao/j406.shtml

四、DIVCSS5總結   -   TOP

使用clear可以清除float產生的浮動,注意clear樣式對象加入位置,如上案例對“.divcss5”清除浮動,我們就只需要在此對象div標簽結束前加入即可清除內部小盒子產生浮動。而一般常用clear:both來清除浮動,其它clear:left和clear:right可以下來根據clear both案例擴展學習實踐。

如需轉載,請注明文章出處和來源網址:http://www.sjiru.tw/rumen/r424.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.sjiru.tw DIVCSS5版權所有。

ag电子竞技俱乐部成员 澳洲幸运10计划助手 排列5走势图500 开心棋牌可以作弊吗 下载四川金7乐开奖结果 利发国际娱乐 彩票中心官方客户端 易发棋牌下载 客户端 福建十一选五走势图江苏 cba最新排名2017一2018 大嘴棋牌刨大王