關於float的浮動無法撐起寬高問題

2021-09-11 22:52:00 字數 908 閱讀 9000

專案開發過程常常遇到乙個問題,在使用float之後,會發現父級元素的寬高無法撐起,寫一段**來嘗試一下

這一段是**html的結構,下面加上css的樣式

診斷**執行後得到的效果:

而我們想要的是列表橫向排列,為li元素加上浮動效果,

li
此時我們會發現外層的div寬高並沒有被撐開,會出現如下效果:

查閱資料發現,造成原因是因為float浮動效果會使浮動元素脫離普通文件流,所以沒法撐起父級元素的寬高,解決問題大概有以下幾種辦法,都能得到預期效果:

解決辦法一:

在最後乙個li元素後面加上乙個div,設定div的class屬性為div,這樣清除了浮動效果,會撐起父級寬高

解決辦法二

給父級元素設定固定寬高,但是由於**開發往往會遇到li元素內容是動態的,此方法並不太好

解決辦法三

為父級元素設定overflow屬性為auto或者hidden,都能達到效果

ul
解決辦法四

設定li元素的display為inline-block

li
解決辦法五

使用偽元素

ul:after

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

float的特點 1,可以使塊元素在一行顯示 元素浮動後會脫標不佔位 2,可以使元素進行模式轉換.但是,但是,但是 有優點 就一定有缺點.有時候一不留神就會被它的缺點折磨的抓狂.我有次用float給父元素裡的所有子元素都新增了浮動效果,但是沒有給父元素設定高度.結果是 廢話不多說 上圖 是這樣的 我...

關於float與清除浮動

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

css關於浮動的例子 float

floating examples box1 float to the left.box1 box2 box3 box1 float to left and under the box2 box1 box2 box3 all box float left box1 box2 box3 1 第乙個例子...