CSS clear both清除浮動總結

2022-05-03 23:30:17 字數 1543 閱讀 5591

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

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

clear清除浮動目錄

1.clear語法與結構

2.div clear常用地方

3.css+div案例

4.divcss總結

一、clear語法與結構

(1)clear語法:clear : none | left | right | both

(2)clear引數值說明:

none:允許兩邊都可以有浮動物件

both:不允許有浮動物件

left:不允許左邊有浮動現象

right:不允許右邊有浮動現象

(3)clear解釋:

(4)css結構

div

divdiv

二、div  clear常用地方

我們常常用於,使用了float  css樣式後產生浮動的情況下。最常用的是使用clear:both清除浮動。比如乙個大物件內有2個小物件

使用了css float樣式為了避免產生浮動,大物件背景或邊框不能正確顯示,這個時候我們就需要clear:both清除浮動。

三、css+div案例

div+css案例說明:

這裡設定乙個css寬度(css width)為500px;

css邊框(css border)為紅色

css背景(css background)為黑色

css內邊框(css padding)為10px盒子

裡面包裹著2個小盒子

乙個css浮動靠右(float:right;)

乙個css浮動靠左(float:left;)

兩者邊框為白色

背景顏色為灰色

寬度為200px

css高度(css height)為150px

這樣我們來觀察案例效果,看浮動產生並使用clear清除浮動。

(1)案例css**:

.divcss

.divcss_left,.divcss_right

/*css注釋:這裡為了截圖分別,對css**換行*/

.divcss_left/* css注釋:設定浮動靠左 */

.divcss_right/*css注釋:設定浮動靠右*/

(2)案例html**片段:

float left盒子

float right盒子

(3)案例效果截圖:

由於divcss內部盒子產生了浮動,所以未被撐開,這個時候需要clear來清除浮動,讓css命名為「divcss」盒子的開啟。

(4)、divcss總結

使用clear可以清除float產生的浮動,注意clear樣式物件加入位置,如上案例對「.divcss」清除浮動,我們就只需要在此物件div標籤結束前

加入即可清除內部小盒子產生浮動。而一般常用clear:both來清除浮動,其它clear:left和clear:right可以下來根據clear both案例擴充套件學習實踐。

CSS clear both清除浮動

我們知道有時使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現。接下來我們來認識與學習css clear知識與用法。clear清除浮動目錄clear語法與結構 div clear常用地方 css div案例 divcss5總結 1 clear...

DIV CSS clear both清除產生浮動

div css clear both清除產生浮動 我們知道有時使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現。aa 接下來我們來認識與學習css clear知識與用法。clear清除浮動目錄clear語法與結構 div clear常用地方...

DIV CSS clear both清除產生浮動

1 clear語法 clear none left right both 2 clear引數值說明 none 允許兩邊都可以有浮動物件 both 不允許有浮動物件 left 不允許左邊有浮動物件 right 不允許右邊有浮動物件 3 clear解釋 該屬性的值指出了不允許有浮動物件的邊情況,又物件左...