CSS清除浮動的4中方法

2021-09-01 21:24:50 字數 1874 閱讀 3322

清除浮動

這個問題,做前端的應該再熟悉不過了,咱是個新人,所以還是記個筆記,做個積累,努力學習向大神靠近。

css清除浮動

的方法網上一搜,大概有n多種,用過幾種,說下個人感受。

1、結尾處加空div標籤 clear:both1

2

3

4

.div1

.left

.right

.clear

這種方法,感覺之前大家用的比較多。但是無緣無故多出乙個空的div,而且浮動越多就要不斷加div,讓我感覺很憂傷,所以我不太喜歡用。

2、父級div 也一起浮動

1

2

3

.div1

.left

.right

這個方法我記得我是在學校的時候,看老外的css書時看到的,當時覺得很好用,但是現在覺得最好還是別用了,有時真的會很麻煩。

因為父級的元素一浮動,又會產生其他元素的浮動問題,不信你可以試試。

3、父級div定義 height

這個方法其實我還是蠻常用的,主要用在那些可以確定高度的元素上,感覺使用上很方便。但是那些需要自適應高度的就不適合了。

1

2

3

.div1

.left

.right

4、父級div定義 偽類:after 和 zoom

這個方法也是我平時比較喜歡用的,感覺還挺好用的

。可以定義乙個通用類選擇器,然後反覆使用:

1

2

.clear

.clear:after

剛用這個的時候,還不知道content屬性是幹嘛的,後來查了下是這麼解釋的:

content配合before和:after偽類一起使用,用於插入內容。

小小舉個例子,簡單寫一下:

a:after

aaa最後的顯示結果是aaaaaa

1

2

3

4

5

.div1

.left

.right

.clear

.clear:after

更多前端技術,請登入

清除浮動6中方法

使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動float left right 使用浮...

清除浮動的6中方法

額外標籤法 使用 after 偽元素 給父元素定高 利用overflow hidden 屬性 父元素浮動 父元素處於絕對定位 在開發網頁的時候經常需要用到各種浮動,此時便需要及時的清除浮動,否則將會導致布局出現問題 引出問題 title outer inner footer style head d...

清除浮動的6中方法總結

doctype html html lang en head meta charset utf 8 title 清除浮動 title style 1.直接給父元素新增高度 擴充套件性不好 2.父元素新增overflow hidden ie6 7 底下不支援bfc 3.父元素新增浮動,float le...