CSS盒子高度塌陷以及高度塌陷的解决方法

最新推荐文章于 2024-01-07 09:54:37 发布

键盘敲上天

最新推荐文章于 2024-01-07 09:54:37 发布

阅读量430

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_66296157/article/details/132336416

版权

本文介绍了盒子塌陷现象，即子元素浮动导致父元素高度塌陷的问题。作者提供了四种解决方案：固定盒子大小、外部盒子浮动、使用overflow属性和after伪元素清除浮动。最后，after伪元素清除浮动被推荐为最佳实践。

摘要由CSDN通过智能技术生成

一、盒子塌陷

（1）什么是盒子塌陷

本应该在父盒子内部的元素跑到了外部，高度坍塌也就是在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

（2）为什么会出现盒子塌陷

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零。

二、解决方法

（1）每个盒子单独定义with和height属性

简单粗暴的方法盒子大小写死，给每个盒子设定固定的with和height，直到合适为止。

优点：快速简单，兼容性良好，适合只改动少量内容不涉及盒子排布的版面。

缺点：非自适应布局，浏览器的窗口大小直接影响用户体验

（2）外部盒子添加浮动

给外部的父盒子也添加浮动，让其也脱离文档流。

优点：方便简单

缺点：影响页面布局，不利于页面维护

（3）给父级盒子添加overflo的属性

优点：方便简单、代码少

缺点：overflow:auto; 有可能出现滚动条，影响美观；overflow:hidden; 可能会带来内容不可见的问题。

（4）after伪元素清除浮动（推荐）

给外部元素的after伪元素设置clear属性再隐藏它，对空盒子方案的改进。

        .clear {
            *zoom: 1
        }
        .clearfix:before,
        .clearfix:after {

            display: table;

            line-height: 0;

            content: "";

        }
        .clearfix:after {
            clear: both;
        }