CSS之浮动及高度塌陷

幻阳梦天

已于 2022-10-20 22:18:35 修改

阅读量558

点赞数

分类专栏： CSS 文章标签： css 前端 vscode

于 2022-10-20 21:38:34 首次发布

本文链接：https://blog.csdn.net/qq_53977993/article/details/127434335

版权

本文探讨了CSS中由于浮动元素导致的高度塌陷问题，并详细介绍了四种解决方法，包括设置固定高度、开启元素BFC（块格式化上下文）、添加空白div以及使用after伪类清除浮动。重点讲解了BFC的作用及其开启方式，推荐使用将overflow设置为hidden来避免副作用。

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

高度塌陷

什么是高度塌陷？

一般情况下，父元素的高度不会写固定值，而是让它被子元素撑开，随着子元素高度的变化而变化。高度塌陷就是我们给子元素设置浮动，让子元素脱离文档流，不再能撑开父元素的高度，导致父元素的高度丢失，从而影响了整个页面的布局。

那怎么解决高度塌陷呢？

<!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>
      .outer {
        border: 10px red solid;
      }
      .inner1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

高度塌陷如图所示：