首頁 > 文章 > web前端 > CSS清浮動有哪些方法？

CSS清浮動有哪些方法？

浮動----會使目前標籤產生上浮效果，從而導致父標籤高度塌陷的問題

#1. 給父元素指定高度

　　;

　　簡單粗暴！高度不定時，如果內部高度大於父級時，容易產生問題

2. 在浮動元素後邊添加額外標籤

　　< div>

#/÷ #　　

　　其他

標籤也可以

　　會產生空標籤，導致程式碼混亂，不易維護，且程式碼的直覺感覺很不好

3. 為父標籤加上overflow:hidden;zoom:1 或overflow:hidden;width:98% 樣式#　　< ;div style="overflow:hidden; zoom:1">

##　　新增zoom:1 是為了相容於IE6，zoom 和width 二者必有一個，但是不能設定height值，瀏覽器能夠自動取得浮動區域高度，

#　　且不能與position一同使用，因為會造成超出尺寸的隱藏問題。

4. 給父標籤設定overflow:auto

　　與3 基本相同，只引起的問題是若若內部高度高出父級時會出現滾輪

5. 為父元素添加浮動，大家一起變成一個整體的浮動塊

　　會引起新的浮動問題

6. 為父標籤新增display:table

#　　父級div屬性變成表格，可能會引起其他位置問題

7. 為父標籤新增絕對定位

　　< ;div style="position:absolute; zoom:1">

##　　與5 原理相通，都是將父元素脫離原始文本流，導致的問題也可能相似，可依舊使用該方法予以解決

#8. 給父標籤定義偽類別:after ，和zoom:1

　　.clearfix:after {display:block; clear:both; content:""; visibility:hidden; height:0}　　.clearfix {zoom:1}

　　IE8以上和非IE瀏覽器才支援:after，zoom:1可解決瀏覽器相容問題

以上是CSS清浮動有哪些方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多