float 關於使用浮動 和清除浮動

2022-08-13 07:21:14 字數 846 閱讀 3523

float的特點  

1,可以使塊元素在一行顯示(元素浮動後會脫標不佔位)

2,可以使元素進行模式轉換.

但是,但是,但是 有優點 就一定有缺點. 有時候一不留神就會被它的缺點折磨的抓狂.

我有次用float給父元素裡的所有子元素都新增了浮動效果,但是沒有給父元素設定高度.. 結果是( 廢話不多說 上圖)

****是這樣的

我當時以為是box1的高度問題,反正就是各種調 ,各種改 結果就是 呵呵呵呵呵浪費時間

所以當你用了浮動後

滿足這兩個條件就要使用清除浮動了

首先來說說清除浮動有哪些方法

(清除浮動有三種方法)

1.使用clear屬性清除浮動

在浮動元素後面加個空標籤

選中該標籤 給它加上clear:both;屬性

2,使用overflow屬性清除浮動

給父元素加上overflow:hidden;(必須是子元素部分沒有超出父元素)

3,使用偽元素清除浮動

元素的選擇器::after

關於float與清除浮動

ps 初學感受 第一次學習浮動和定位的時候,也不知道這個抽象的概念到底是怎麼樣的,元素到底是怎麼飄起來的 他怎麼不上天?那你就錯了,他真的上天了!1.浮動 float 取值 left right none inherit 故名思意 left 左浮動 right 右浮動 none 不浮動 預設值 in...

float清除浮動

影響 浮動會使元素具有塊級元素和行內元素的特點 即內聯塊的特點 讓塊元素在同一行顯示。內聯塊 inline block 和浮動 float left right none 元素脫離文件流,按照浮動方向移動,遇到父級邊界或者相鄰浮動元素停住 但是無論哪種方式都需要做一些處理 去除inline bloc...

float清除浮動

在非ie瀏覽器下,當容器的高度為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響 甚至破壞 布局的現象。即父級物件盒子無法被撐開,這個現象叫浮動溢位,為了防止這個現象的出現而進行的css處理,...