首頁  >  文章  >  web前端  >  淺談CSS浮動的方法介紹

淺談CSS浮動的方法介紹

高洛峰
高洛峰原創
2017-03-07 13:53:081693瀏覽

元素的水平方向浮動,表示元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動,直到它的外緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

 

正文

浮動是一種半脫離文檔流的狀態,他不像絕對定位那樣完全脫離文檔流

絕對定位:



淺談CSS浮動的方法介紹

此時p1沒有設定高度,雖然在p2中設定了高度100px,但是p2是撐不開p1的高度的,因為絕對定位完全脫離文檔流,p1是完全感受不到p2的;

 

浮動:​​第一種情況



淺談CSS浮動的方法介紹

##我們在p2設定了向左浮動,假如你沒有在p1中清除p2浮動帶來的影響,那麼你也是無法撐開p1的高度的,因為p1感受不到浮動.

但是當你清除了浮動之後,p1就能感受到浮動的存在了(相當於浮動現在是在文檔流中),高度就會撐開。

這裡有兩個解法

淺談CSS浮動的方法介紹

 

浮動:​​第二種情況

神經病陽癲瘋


淺談CSS浮動的方法介紹

因為浮動(p2)能感受得到這裡的

,所以該怎麼顯示就怎麼顯示;即

浮動元素之前的元素將不會受到影響。


 


神經病陽癲瘋

淺談CSS浮動的方法介紹

是感受不到浮動(p2)的存在的,那麼

是會被浮動覆蓋的,但是他又不是完全被覆蓋。

我們可以發現

的背景確實是被覆蓋了,但是

的文本內容沒有被覆蓋,這也是浮動的一個怪異的地方——浮動不會覆蓋文檔流中文本,但是其他屬性會覆蓋。

解決方法

設定一個clear:left; 清除浮動的影響,讓

能感受到的到(p2)的存在。


神經病陽癲瘋

淺談CSS浮動的方法介紹

#以上這篇淺談CSS浮動的那點事兒就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

更多淺談CSS浮動的方法介紹相關文章請關注PHP中文網!


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