浮动的高度塌陷

最新推荐文章于 2023-12-25 15:36:46 发布

VIP文章时光带不走

最新推荐文章于 2023-12-25 15:36:46 发布

阅读量203

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/cj1555640/article/details/126267224

版权

一.高度塌陷概念

高度塌陷：

父元素的高度一般是被子元素或者叫内容撑开的，若设置子元素浮动，则子元素就会脱离文档流。也就撑不开父元素的高度了，从而导致父元素的高度丢失，页面布局混乱

二.高度塌陷解决方案

1.直接设置父元素高度

  
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .outer {
            border: 10px red solid;
        }

        .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>
</html>

当.inner的状态设为float