html高度塌陷问题

最新推荐文章于 2023-12-19 18:02:15 发布

头顶一尘不染

最新推荐文章于 2023-12-19 18:02:15 发布

阅读量698

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/LYC010727/article/details/128088476

版权

高度塌陷

一般情况下，我们不会给父元素设置指定的高度，都是让他被内容撑开的。如果我们给子元素设置浮动，子元素会脱离文档流。一旦元素脱离文档流了，子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致页面布局混乱，这就叫高度塌陷。

解决高度塌陷方法一

给父元素设置固定高度,但这种方式不推荐使用

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

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

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

解决高度塌陷方法二

给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后
元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷
1、开启BFC后，元素具有哪些特点？
（1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）
（2）、开启BFC的元素就不会被浮动元素所覆盖
（3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题）

2、如何开启BFC属性
（1）、设置overflow样式，样式值只要是非visible
也就是说可以设置hideen，auto，scroll等
其中hideen是副作用最小（推荐使用）
（2）、设置元素浮动(不推荐)
确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
页面布局依然会混乱，而且父元素的宽度也会丢失
（3）、将元素转成行内块元素(不推荐)
可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，
而且三像素也出现
（4）、将元素设置绝对定位 position: absolute;(不推荐)
确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
页面布局依然会混乱，而且父元素的宽度也会丢失

<style type="text/css">
      .outer {
        border: 10px red solid;
        height: 100px;
        /* 开启BFC */
        overflow: scroll;
        display: inline-block;
        position: absolute;
      }

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

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

解决高度塌陷方法三

在浮动子元素的下方设置一个空的块元素，然后借助clear属性来消除浮动元素对空的块元素的浮动影响。缺点：在结构里面多了一个空的块元素。

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

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        height: 100px;
        background-color: yellow;
      }
      .box4{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">box2</div>
      <!-- 空的块元素 -->
      <div class="box4"></div>
    </div>
    <div class="box3"></div>
  </body>

解决高度塌陷问题方法四

结合伪类after以及clear来解决
通过伪类after，在元素的后面添加内容，将这个内容转成块元素，再清除其他浮动元素对这个块元素的浮动影响。
一般情况下，我们会给这个写法单独设置一个类名，哪里需要解决高度塌陷问题，就给对应的位置添加类名，这种方式也是最常用的解决高度塌陷问题的方法。

<style type="text/css">
      .box1 {
        border: 10px solid red;
      }
      .clearfix::after{
        /* 添加的元素不会独占一行 */
        content: '';
        /* 将添加的元素转成块元素 */
        display: block;
        /* 清除浮动元素对空的块元素的影响 */
        clear: both;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
    <p class="p1 clearfix">
      <div class="p2"></div>
    </p>
  </body>