CSS之解决高度塌陷

MTa0
405 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天

前言

对于初学者在学习浮动的时候，可能会碰到一个不知如何解决的问题，这个问题就叫做高度塌陷。那么让我们来看看高度塌陷是怎样解决的吧！

一、高度塌陷是什么

高度塌陷的问题：

在浮动布局中，父元素的高度默认是被子元素撑开的。

  • 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素高度丢失。
  • 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

下面配上代码和图片方便理解

    <style>
        .outer{
            width: 300px;
            border: 10px red solid;
        }
        .inner{
            width: 100px;
            height: 50px;
            background-color: rgb(135, 217, 135);
            float: left;
        }
    </style>
    
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>

image.png

二、如何解决高度塌陷

一、 设置父元素高度

实现办法：只需在上面代码的outer的样式里添加一个height属性即可

    .outer{
            width: 300px;
            height: 100px;
            border: 10px red solid;
          }

image.png

注：该方法会导致父元素不能随着子元素高度的变化而变化，也就是元素高度不能自适应。

二、 开启BFC(Block Formatting Context) 块级格式上下文

  • BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。
  • 元素开启BFC后的特点：1.开启BFC的元素不会被浮动元素所覆盖。2.开启BFC的元素子元素和父元素外边距不会重叠。3.开启BFC的元素可以包含浮动的子元素。

实现办法： 1.设置元素的浮动。2.设置行内块元素。3.设置弹性布局。4.将元素的overflow设置为一个非visible的值。注：常用的方式，为元素设置overflow:hidden

image.png

三、 在子元素后面加上一个内容为空的块

实现办法：在inner后面加了一个没有内容的块 可以让outer随着inner高度的变化而变化

    <body>
        <div class="outer">
            <div class="inner"></div>
            <div class="block"></div>
        </div>
    </body>

image.png

注：这种方法可以基本解决高度塌陷问题，但是会在页面中添加多余的结构

四、 最终解决办法——clearfix

实现办法： 

    .clearfix::before,
     .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }

image.png

注：clearfix这个样式可以同时解决高度塌陷问题又可以解决外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix。

avatar
文章
阅读
粉丝