[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;
    }

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

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