這篇文章給大家介紹清除浮動的影響是怎樣的,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
浮動會導致父元素塌陷如圖:
解決辦法:
父元素overflow:hidden,如圖
末尾插入子元素clear,如圖
為甚么,父元素overflow:hidden會解決塌陷問題?
overflow:hidden 的意思是超出的部分要裁切隱藏掉
那么如果 float 的元素不占普通流位置 普通流的包含塊要根據內容高度裁切隱藏
如果高度是默認值auto 那么不計算其內浮動元素高度就裁切
就有可能會裁掉float 這是反布局常識的。
如果了解BFC這個問題也就迎刃而解了,看看BFC怎么說的。
BFC布局規范中,計算BFC的高度時,浮動元素也參與計算
overflow:hidden會創建BFC。
為甚么,末尾插入子元素clear會解決塌陷問題?
看一下什么是清楚浮動這問題也可以迎刃而解
如果聲明為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
關于清除浮動的影響是怎樣的就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。