解决高度坍塌的四种方式

高度坍塌的根源是:常规流盒子的自动高度在计算时,不会考虑浮动盒子

清除浮动

  1. 给父元素一个固定的高度
    (不建议使用,不够灵活)
    解决高度坍塌的四种方式_第1张图片

子元素浮动的时候,会在其内部创建一个新的bfc,此时,父元素的处于html这个根元素的渲染区域,然后子元素创建了新的bfc,也处于根元素的渲染范围下,此时父元素和子元素的关系可以说只是视觉上的,并没有更深的联系
解决高度坍塌的四种方式_第2张图片

body只有0
2. 给父元素添加属性overflow:hidden;
原理是利用overflow:hidden;创建了一个新的bfc,在新的bfc里面,自动高度会计算浮动元素的高度,于是有了这种解决高度坍塌的方法
缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。可能会和我们想得到的预期效果不一样
解决高度坍塌的四种方式_第3张图片

就像这张图,想要得到的文字部分为隐藏

  1. 给父元素设置伪元素选择器,并设置常用的清除浮动的样式,然后after就会把盒子撑开
 .clearfix::after{
     
    content: "";
    display: block;
    clear: both;
}

想要注意的是一定要设置display: block;,因为after默认是行盒
4. 在子元素的末尾添加一个空的 div ,并设置相应的清除浮动样式
简单来说就是盒子套盒子,用这个空的div代替方法3的after,这样不好,因为直接增加了缓冲压力,会让代码无意义的变长

你可能感兴趣的:(总结)