overflow解決float浮動後高度自適應問題

2021-08-30 04:07:09 字數 350 閱讀 3084

也許你在做網頁的時候發現,發乙個區塊內的元素被應用了float之後,那麼整個box的高度對就不以被浮動物件的高度為標準了。

如圖中的城市導航內的城市列表中採用了float之後,那個外框的高度並不是內容元素的高度:

怎麼解決這個問題呢?經發現可以採用overflow來解決!方法是在父元素加上如下**即可

overflow:auto; zoom:1;

overflow:auto;是讓高度自適應, zoom:1;是為了相容ie6,也可以用height:1%;的方式來解決。

header

右側內容

footer

overflow解決float浮動後高度自適應問題

也許你在做網頁的時候發現,發乙個區塊內的元素被應用了float之後,那麼整個box的高度對就不以被浮動物件的高度為標準了。如圖中的城市導航內的城市列表中採用了float之後,那個外框的高度並不是內容元素的高度 怎麼解決這個問題呢?經發現可以採用overflow來解決!方法是在父元素加上 以下是 片段...

flex布局下overflow失效解決方案

這裡使用經典的兩欄布局 比如說我們想讓中間部分自適應並且超出長度出現滾動 dom結構簡單如下 class container class left div class content span span span div class right div div 樣式檔案這裡就直接使用less寫了 c...

overflow失效問題

通常乙個盒子的內容是被限制在盒子邊界之內的。但有時也會產生溢位,即部分或全部內容跑到盒子邊界之外。溢位將在滿足下列條件之一時出現 1.乙個不換行的行元素寬度超出了容器盒子寬度。2.乙個寬度固定的塊元素放在了比它窄的容器盒子內。3.乙個元素的高度超出了容器盒子的高度。4.乙個子孫元素,由負邊距值引起的...