HTML中高度塌陷问题，及解决方法

最新推荐文章于 2024-03-24 12:38:43 发布

飘荡的云~

最新推荐文章于 2024-03-24 12:38:43 发布

阅读量556

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_43547725/article/details/133798698

版权

一：高度塌陷

一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,. 然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌馅。

不设置浮动时，代码如下：

<style type="text/css">
      .outer {
        width: 200px;
        border: 10px red solid;
      }

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

      .box3 {
        width: 300px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>

    <div class="box3"></div>
  </body>

结果如下：

给子元素 “inner ”设置浮动

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

结果如下：

二：解决方法

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

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

2.给元素开启BFC（块级格式化上下文）

BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块，具有一些特点，这些特点，可以帮助我们解决一些问题

BCF开启后具备的特点：

1、开启BFC的元素，垂直方向外边距不会重叠

2、开启BFC的元素，不会被浮动元素覆盖

3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题

如何开启BFC

1、设置浮动

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

.outer {
        width: 200px;
        border: 10px red solid;
        float: left;     
      }

2、将元素转成行内块

可以解决高度塌陷，但宽度会丢失，且有三像素问题

.outer {
        width: 200px;
        border: 10px red solid;
        display: inline-block;
      }

3、overflow属性非visible值

副作用最小，建议使用

.outer {
        width: 200px;
        border: 10px red solid;
        overflow: hidden; 
      }

4、开启绝对定位

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

.outer {
        width: 200px;
        border: 10px red solid;     
        /* 开启绝对定位 */
        position: absolute; 
      }

3.在浮动元素下面添加一个空白的块元素

由于这个块元素没有浮动，还在文档流中，可以给这个块元素设置清楚浮动，让其撑开父元素的高度。缺点是页面多了一个空白的结构。

未添加空白的块元素，结果如下

添加一空白块元素 box3

.box3{
        width: 200px;
        height: 100px;
        background-color: yellowgreen;
        clear: both;
      }

结果如下：

清除浮动

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

<body>
    <!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>

<style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: right;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
      }

结果如下：

通过 clear 消除box2浮动对box3的影响

/* 需求：消除box2浮动对box3的影响 */
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear: both;
      }

结果如下：

4.可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动

这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

<body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
  </body>

.box1 {
        width: 200px;
        border: 10px solid red;
      }

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

结果如下：

通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动

.clearfix::after {
        content: "";
        /* display: block; */
        display: table;
        clear: both;
      }

结果如下：

飘荡的云~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML中高度塌陷问题，及解决方法

一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌馅。
复制链接

扫一扫