什么是盒子塌陷和解决办法

2022-07-25 14:08:56

盒子塌陷:子盒子的内容到父盒子外面

这里container:父亲盒子,item:子盒子

子盒子的内容到父盒子外面了,盒子就是塌陷了

产生塌陷的原因:

  • 父盒子:没有设置高度  且
  • 子盒子:脱离文档流(eg:float:left)

 ==> 盒子塌陷

解决盒子塌陷问题:

  • 对父盒子:把父盒子的高度写死即可        或
  • 对子盒子:清除子盒子的浮动

 清除子盒子的浮动方法(3个):

  1. 在子盒子后面添加一个盒子,给其添加clear:both属性
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
          width: 90px;
          height: auto;
          background-color: aqua;
        }
        .item {
          float: left;
          width: 50px;
          height: 100px;
          background-color: yellow;
        }
        .clear {
          clear: both;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="item"></div>
        <div class="clear"></div>
      </div>
    </body>
    </html>
  2. 给父盒子添加overflow:hidden
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        /* 开启BFC */
        .container {
          width: 100px;
          background-color: aquamarine;
          overflow: hidden;
          /* IE6 */
          zoom: 1;
        }
        .item {
          background-color: bisque;
          width: 50px;
          height: 100px;
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="item"></div>
      </div>
    </body>
    </html>
  3. 给父盒子添加:after伪元素(最常见)
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
          background-color: blue;
          width: 100px;
        }
        /*==for IE6/7 Maxthon2==*/
        .clearfix {
          zoom: 1;
        }
        .clearfix:after {
          clear: both;
          content: '';
          display: block;
        }
        .item {
          width: 50px;
          height: 100px;
          background-color: blueviolet;
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="container clearfix">
        <div class="item">
    
        </div>
      </div>
    </body>
    </html>
  • 作者:日晞
  • 原文链接:https://blog.csdn.net/weixin_44644385/article/details/119738617
    更新时间:2022-07-25 14:08:56