HTML中的清除浮動的常用方法

2022-07-07 20:06:13 字數 1431 閱讀 9928

以下面的div為例:

html:

[html]view plain

copy

div>  

div>  

div>  

css:

[html]view plain

copy

.test  

.test1  

.test2  

效果如圖:

現在,給test1設定乙個浮動float:left;

由於test1設定了浮動,所以後面的元素被覆蓋了效果如圖:

清除浮動的方法:給test2設定:clear:both;或者clear:left;

效果如圖:

現在給test1和test2都設定float:left;

test1和test2都被浮動起來了。效果為:

如果現在:把父級div,test的高和寬都去掉,父級元素就不會顯示,簡單說就是沒有被子級元素撐起來

效果為:

清除浮動的方法:

一、給父級元素設定高度和寬度,也就是說回到了上面

二、給test2元素後面新增乙個新元素,然後給這個元素設定clear:both;

效果為:

三、給父級元素設定overflow:hidden;效果給上圖一樣,但是還有個問題就是在test2後面新增乙個新元素,還是會受到前面元素的浮動影響,所以還要給後面的元素清除浮動

這裡要注意乙個問題:

如果在test裡面,test2後面新增乙個新的div,叫test3,然後給test3設定clear:both;

效果為:

如果設定overflow:hidden:

效果為:

清除浮動的常用方法

先說不清除浮動的效果 給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。然後說說幾個不常用的清除浮動方法,比如 style overflow hidden style float left div style float left div div 就是給父元素設定overflow屬性的那種,具體樣...

清除浮動的常用方法

1.給浮動元素父級設定高度 2.在最後乙個浮動標籤後,新加乙個標籤,將其樣式設定為 clear both 3.在父級元素新增樣式 overflow hidden 此方法會將多出的內容裁切掉,無法顯示要溢位的元素 4.使用before和after雙偽元素清除浮動,使用偽元素清除浮動必須是塊級元素上使用...

清除浮動的常用方法

方法一 對收到影響的元素進行設定,哪側受到浮動的影響就清除哪側,clear both clear left clear right 方法二 同時設定100 或固定寬度 overflow hidden 嘗試一下 如何使得p標籤內容跟div標籤的不同一行呢?doctype html html lang ...