高度塌陷的语法以及解决问题（超详细）

最新推荐文章于 2025-04-07 16:47:22 发布

手可摘星辰^v^

最新推荐文章于 2025-04-07 16:47:22 发布

阅读量229

点赞数 24

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/m0_72959685/article/details/126263219

版权

可以直接在高度塌陷的父元素的最后，添加一个空白的块元素，由于这个块元素并没有浮动，所以他是可以撑开父元素的高度的，

如上图所示，使用这种方法没有什么副作用，不过是页面多了多余的结构，可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作

一、语法

父元素的高度一般是被子元素或者被内容撑开的，若设置质元素浮动，则子元素就会脱离文档流也就撑不开父元素的高度了，从而导致后面的内容位移，导致结构混乱，这就叫高度塌陷

例：

设置主要内容的样式：.outer是父元素.inner是子元素.box3是其他内容
      .outer {
        border: 10px red solid;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
主要内容：
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>

解析：从例子中可以看到由于子元素蓝色盒子脱离了文档流，所以父元素只剩下边框了，其他内容黄色盒子也就挤上去了，影响了页面布局，这就是高度塌陷！

二、解决办法

1.设置父元素的高度（不推荐使用）

设置父元素的高度和浮动的子元素高度一致，子元素会在父元素里，其他内容也不会乱跑，解决了高度塌陷，但不被推荐使用

2.开启bfc属性

开启bfc属性的特性：

a 父元素垂直外边距不会和子元素重叠（解决好外边距重叠）

意思是说设置子元素的外边距不会传递给父元素，从而使布局更加完整

b 开启BFC的元素不会被浮动元素所覆盖

意思是说假设父元素开启BFC后子元素浮动也依然能够撑开父元素的高度

c 开启BFC的元素可以包含浮动的子元素（解决高度塌陷的方法）

意思和上面的说法差不多

如何开启元素的BFC

设置元素浮动（不推荐）：

使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问题

像这样，不仅没有解决问题，而且影响了布局，所以不推荐使用

设置元素为inline-block（不推荐）

可以解决高度丢失的问题，但是会导致宽度丢失，而且会有一个三像素的空白，不推荐使用这种方式

如图所示，元素丢失了宽度，与黄色盒子之间有空白的间隙，影响了布局，所以不推荐使用

将元素的overflow设置为一个非visible的值（副作用比较小，推荐使用）

设置样式：.outer是父元素.inner是子元素.box3是其他内容
      .outer {
        border: 10px red solid;
        overflow：hidden；
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
主要内容：
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>

像这样解决了高度塌陷布局也没有乱，副作用很小，推荐使用

设置元素绝对定位(暂时没学习)

元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问题

总结：将overflow设置为hidden是副作用最小的开启BFC的方式。

3.清除浮动

可以直接在高度塌陷的父元素的最后，添加一个空白的块元素，由于这个块元素并没有浮动，所以他是可以撑开父元素的高度的，

然后在对其进行清除浮动，这样可以通过这个空白的块元素来撑开父元素的高度，基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

   设置主要内容的样式：
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        clear:both ;
      }
   主要内容：
     <div class="box1">
      <div class="box2">box2</div>
      <div class="box3"></div>
    </div>

如上图所示，使用这种方法没有什么副作用，不过是页面多了多余的结构，可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

       设置主要内容的样式：
  .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

主要内容：
 <div class="box1 clearfix">
      <div class="box2"></div>
    </div