[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法

父元素塌陷父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。可能出现的情况 即子元素脱标的情况浮动固定定位绝对定位解决方案父元素底部增加一行 <div style='clear:both;'></div>缺点:添加了无意义的空标签 违背了结构表现分离父元素一起浮动本质是一个将错就错的方法利用BFC来给父元素增加CSS如给父元素加上 overflow:auto; 或display:table-cell;或display:table-caption;等利用after伪元素 父元素增加after伪元素parent:after{content: ".";display: block;height: 0px;clear: both;visibility: hidden;} 更优雅的改进方案 ---常用.clearfix:after,.clearfix:before{content: " ";display: table; } .clearfix:after{clear: both;}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，

但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 父元素下有子元素 子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法