當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何清除浮动(float)所带来的影响

發布時間：2024/10/12 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了如何清除浮动(float)所带来的影响小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

清除浮動(float)

1.定義和用法

　　在w3c中給了浮動這樣的定義。

　　"float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素"。

　　如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

　　注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

　　通俗的來講，浮動就是讓默認標準文檔流下的元素漂浮起來并水平排列。

　　讓圖像右浮動：img { float:right; }

　　值：

left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，并會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

?

2.浮動所帶來的影響

　　1) 行內元素浮動之后可以支持寬高;

　　2) 文本會給浮動定位的元素讓位(可以以此制作文本繞排的效果);

　　3) 在父級沒有給高度的情況下,子級浮動后父級會沒有高度;

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>內容生成清除浮動</title><style type="text/css">#container{border: 1px solid #000;padding: 20px;background-color: #0000FF;}#d1,#d2,#d3{width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #000;margin: 10px;float: left;}</style></head><body><div id="container"><div id="d1">1</div><div id="d2">2</div><div id="d3">3</div></div></body> </html>

　如圖,一般來說父級中的內容會將其高度撐起來,但圖中并沒有;

3.清除浮動

　　如何清除浮動,這里介紹4種方法:

　　1) 在父級的最后添加一個空的div,添加clear屬性;　　　

　　這里不推薦使用這種方法,因為會在頁面添加無用的標簽,會使頁面布局復雜化;

　　2) 給父級設置overflow:hidden;(溢出隱藏)

　　　　會觸發bfc(block formatting context)--塊級格式化上下文;　　

　　　　同樣也不推薦使用,因為這個屬性與定位一起使用時會有副作用.

　　3)使用偽元素after(推薦使用)

.clearfix:after{content:""; /*內容為空*/height:0; /*高度為0*/line-height:0; /*行高為0*/display:block; /*塊級元素*/visibility:hidden; /*隱藏*/clear:both; /*行高為0*/ } .clearfix{zoom:1; /*兼容IE678*/ } <div class="clearfix" > <div id="d1">1</div> <div id="d2">2</div> <div id="d3">3</div> </div>

　　4) 使用雙偽元素:after和before(不推薦使用,不嚴謹)

.clearfix:after ,clearfix:before{content:""; display:table; clear:both; } .clearfix{zoom:1; /*兼容IE678*/ }