解決子元素浮動,父元素高度變小的問題

2022-07-17 11:39:10 字數 331 閱讀 9819

當子元素浮動時,脫離了文件流,不佔據原來的頁面空間,使父元素的高度變小,甚至為0,我們可以通過幾種方式來解決這個問題。

解決辦法如下:

1.設定父元素的overflow為hidden。缺點:把本應該顯示的元素隱藏。

2.在知道父元素本應該是多高的情況下,設定父元素的高度。缺點:不知道父元素高度的不適合。

3.新增空的塊級元素,並設定其style屬性值為clear:both;例如:

。缺點:增加**冗餘

element(父元素):after{

content:'';

display:block;

clear:both;

子元素浮動,父元素高度為0解決方法

在進行浮動布局時,大多數人都深知,在必要的地方進行浮動清理 例如 some content 此時預覽此 我們會發現最外層的父元素float container,並沒有顯示。這是因為子元素因進行了浮動,而脫離了文件流,導致父元素的height為零。若將 修改為 some content 注意,多了一段...

解決子元素的浮動導致的父元素高度坍塌的問題

參考 當父元素中的子元素設定了float屬性時,可認為子元素就跳出了父元素的束縛而位於新的一層,此時父元素內部沒有元素,其高度就變為0。要解決這個問題,人為給父元素設定高度是不現實的,因為一般父元素的高度是由子元素決定的,為此我們可以從父子元素兩個角度出發,用兩種思路解決這個問題。1.子元素角度 新...

CSS子元素浮動導致父元素高度塌陷問題

根據w3c標準,在頁面中元素都有乙個隱含的屬性叫做 block formatting context,簡稱 bfc,該屬性可以設定開啟或者關閉,預設是關閉的。當開啟元素的bfc以後,元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...