元素的水平方向浮動,表示元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動,直到它的外緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
正文
浮動是一種半脫離文檔流的狀態,他不像絕對定位那樣完全脫離文檔流
絕對定位:
此時p1沒有設定高度,雖然在p2中設定了高度100px,但是p2是撐不開p1的高度的,因為絕對定位完全脫離文檔流,p1是完全感受不到p2的;
浮動:第一種情況
這裡有兩個解法
浮動:第二種情況
神經病陽癲瘋
,所以該怎麼顯示就怎麼顯示;即
浮動元素之前的元素將不會受到影響。
神經病陽癲瘋
是感受不到浮動(p2)的存在的,那麼
是會被浮動覆蓋的,但是他又不是完全被覆蓋。
我們可以發現
的背景確實是被覆蓋了,但是
的文本內容沒有被覆蓋,這也是浮動的一個怪異的地方——浮動不會覆蓋文檔流中文本,但是其他屬性會覆蓋。
解決方法
給
設定一個clear:left; 清除浮動的影響,讓
能感受到的到(p2)的存在。
神經病陽癲瘋
#以上這篇淺談CSS浮動的那點事兒就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。
更多淺談CSS浮動的方法介紹相關文章請關注PHP中文網!