標籤:數值 vcs round tag 高度 border clear 知識 val
DIV+CSS clear both清除產生浮動
我們知道有時使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現。
clear 屬性規定元素的哪一側不允許其他浮動元素
1、clear文法:
clear : none | left|right| both
值 |
描述 |
left |
在左側不允許浮動元素。 |
right |
在右側不允許浮動元素。 |
both |
在左右兩側均不允許浮動元素。 |
none |
預設值。允許浮動元素出現在兩側。 |
inherit |
規定應該從父元素繼承 clear 屬性的值。 |
2、css結構
div{clear:left}
div{clear:right}
div{clear:both}
3、常用到的地方
我們常常用於使用了float css樣式後產生浮動,最常用是使用clear:both清除浮動。比如一個大對象內有2個小對象使用了css float樣式為了避免產生浮動,大對象背景或邊框不能正確顯示,這個時候我們就需要clear:both清除浮動。
4、例子
例子1
代碼這樣
因為每個商品都有浮動設定float:left,需要在後面清除浮動,將shop的外部盒子撐開來再後面
<div class="clear"></div>
.clear{
clear:both;
}
例子2
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代碼:
- .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
- .divcss5_left,.divcss5_right{
- border:1px solid #FFF;background:#999;width:200px;height:150px
- }
- /* css注釋: 這裡為了分別,對css代碼換行 */
- .divcss5_left{ float:left}/* css注釋: 設定浮動靠左 */
- .divcss5_right{ float:right}/* css注釋:設定浮動靠右 */
DIV+CSS clear both清除產生浮動
我們知道有時使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現。
接下來我們來認識與學習css clear知識與用法。
-
clear清除浮動目錄
-
- clear文法與結構
- div clear常用地方
- css+div案例
- 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代碼:
- .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
- .divcss5_left,.divcss5_right{
- border:1px solid #FFF;background:#999;width:200px;height:150px
- }
- /* css注釋: 這裡為了分別,對css代碼換行 */
- .divcss5_left{ float:left}/* css注釋: 設定浮動靠左 */
- .divcss5_right{ float:right}/* css注釋:設定浮動靠右 */
2、案例html程式碼片段:
- <div class="divcss5">
- <div class="divcss5_left">float left盒子</div>
- <div class="divcss5_right">float right盒子</div>
- </div>
3、案例效果
4、清除浮動方法
我們在css代碼中加入CSS代碼:
- .clear{ clear:both}
Html代碼中“.divcss5”盒子</div>結束標籤前加入代碼:
- <div class="clear"></div>
最終使用div css clear清除浮動後應用用法案例
四、DIVCSS5總結 - TOP
使用clear可以清除float產生的浮動,注意clear樣式對象加入位置,如上案例對“.divcss5”清除浮動,我們就只需要在此對象div標籤結束前加入即可清除內部小盒子產生浮動。而一般常用clear:both來清除浮動,其它clear:left和clear:right可以下來根據clear both案例擴充學習實踐。
CSS ,浮動,clear記錄,和一些轉載別處