[css] 父元素下有子元素，子元素也有高度但父元素的高度為何為0呢？分析下可能出現(xiàn)的原因及解決方法

父元素塌陷父元素在文檔流中高度默認是被子元素撐開的，當子元素脫離文檔流以后，將無法撐起父元素的高度，也就會導致父元素的高度塌陷。父元素的高度一旦塌陷, 所有標準流中元素的位置將會上移，導致整個頁面的布局混亂。 可能出現(xiàn)的情況 即子元素脫標的情況浮動固定定位絕對定位解決方案父元素底部增加一行 <div style='clear:both;'></div>缺點:添加了無意義的空標簽 違背了結構表現(xiàn)分離父元素一起浮動本質是一個將錯就錯的方法利用BFC來給父元素增加CSS如給父元素加上 overflow:auto; 或display:table-cell;或display:table-caption;等利用after偽元素 父元素增加after偽元素parent:after{content: ".";display: block;height: 0px;clear: both;visibility: hidden;} 更優(yōu)雅的改進方案 ---常用.clearfix:after,.clearfix:before{content: " ";display: table; } .clearfix:after{clear: both;}

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。