float浮動時,解決父級邊框塌陷的4種方法

2021-08-13 17:05:17 字數 746 閱讀 3516

父級邊框塌陷的原因:

我們在進行網頁布局時,會用到float浮動屬性,只要父級元素下的子元素浮動了,肯定會影響父級元素的邊框。假設父級元素下有十個子元素,我們無論是全部浮動還是只浮動了乙個元素,都要對父級元素採取措施防止邊框塌陷。為什麼這樣說,我們可以試驗一下,如果你只浮動了乙個子元素,咱們讓這個浮動的子元素高度在它同級裡時最高的,執行一下,你會發現父級邊框塌陷了。

解決方法:

1、給父級元素新增乙個高度;

不推薦這種方法。高度無法確定,一次次地試高度很麻煩,何況不能從本質上解決問題。

2、在最後乙個子元素後加乙個空的div,給他新增樣式clear,清除兩側浮動;

這種方法也很有效,但是加了乙個空的div,造成**的冗餘。

3、父級元素新增overflow:hidden;

overflow是溢位管理的意思,但是有一點不好,在有下拉列表的時候,下拉列表會顯示不出來。

4、父級元素新增after偽類;

.clear:after

這種方法雖然有些麻煩,但是沒有任何***,對檔案中的其他元素沒有任何影響。

而且我們只需要在css樣式表中寫入一次即可,然後在需要防止父級邊框的元素中,給它的class值中新增clear就行了。

解決浮動元素父級塌陷問題

坍塌原因 當父級元素沒有設定高度時,當子元素浮動後,子元素會脫離文件流,而父級元素的高度不會像在普通文件流中一樣被內容撐開,此時,它是不能被撐開的,會對後續的布局結構造成很多困擾。解決方法 clear both div clear取值 left 清除左浮動 right 清除右浮動 both 清除所有...

前端學習(14)解決父級邊框塌陷的問題

clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動的元素 clear none 解決方案 增加父級元素的高度 father增加乙個空的div標籤,清除浮動 class clear div clearoverfl...

父級元素與子集元素浮動影響的解決

style box box1 box2 style body div class box div class box1 div1 div div class box2 div2 div div body 先看現在的效果 將div1和div2進行左浮動,會發現 父級元素不見了,因為div1和div2脫...