2.高度塌陷全解版

最新推荐文章于 2024-09-10 17:45:18 发布

猿人li

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量93

点赞数

文章标签： html5 html 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_72711523/article/details/129013958

版权

文章介绍了CSS布局中由于浮动元素导致的父元素高度塌陷现象，并通过三个示例展示了不同浮动情况对父元素高度的影响。接着，提出了两种解决方法：利用BFC（块格式化上下文）的overflow:hidden属性，以及使用清除浮动的clearfix方案，确保父元素能正确包含浮动的子元素，从而恢复其高度。

摘要由CSDN通过智能技术生成

高度塌陷现象: 当父元素里面的子元素设置了浮动,父元素的高会受到影响的现象,对比以下三种情况观察父元素的高度变化

不浮动即float:none的时候,父元素的高度是由子元素撑开的.即big高度为400px+10px像素的边框线

<!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>
    .big{
      width: 400px;
      background-color: aqua;
      border: 5px solid green;
    }
    .box1{
      height: 200px;
      background-color: red;
      float: none;
    }
    .box2{
      height: 200px;
      background-color: purple;
      float: none;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

2 给其中一个加float:left,另一个不加的情况,此时box1加了浮动就会飘起来不占位.高度就是0了,而box2没加.依然占位,所以父元素的高由box2撑开,所以big高度为200px+10px的边框线

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .big{
      width: 400px;
      background-color: aqua;
      border: 5px solid green;
    }
    .box1{
      height: 200px;
      background-color: red;
      float: left;
    }
    .box2{
      height: 200px;
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

两个子元素全部浮动的情况,box1 和box2全部浮动,都不占位了.高度都为0了,所以此时就没有子元素撑开父元素了,父元素的高度就只剩10px的边框线了

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .big{
      width: 400px;
      background-color: aqua;
      border: 5px solid green;
    }
    .box1{
      height: 200px;
      background-color: red;
      float: left;
    }
    .box2{
      height: 200px;
      background-color: purple;
      float: left;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

高度塌陷常用解决办法

BFC原理解决: 让父元素触发BFC,即添加overflow:hidden,因为BFC区域内浮动的元素参与高度计算

给big添加了overflow:hideen以后,父元素big就触发了BFC,就算里面的子元素都浮动了,仍然参与计算,所以big的高度为400px+10px=410px

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .big{
      width: 400px;
      background-color: aqua;
      border: 5px solid green;
      overflow: hidden;
    }
    .box1{
      height: 200px;
      background-color: red;
      float: left;
    }
    .box2{
      height: 200px;
      background-color: purple;
      float: left;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

万能清除法:

原理是在浮动的元素最后面生成一个空的块元素命名clear_fix,并设置清除浮动的样式,实现清除浮动造成的高度塌陷,此时父元素高度就是400px+10px=410px

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .clear_fix::after{
      content: "";
      display: block;
      clear: both;
      width: 0;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
    .big{
      width: 400px;
      background-color: aqua;
      border: 5px solid green;
    }
    .box1{
      height: 200px;
      background-color: red;
      float: left;
    }
    .box2{
      height: 200px;
      background-color: purple;
      float: left;
    }
  </style>
</head>
<body>
  <div class="big clear_fix">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

其他办法(不推荐,有弊端)