CSS基础知识六（浮动的高度塌陷问题及解决方案）

目录

1.浮动高度塌陷概念

2.下面是几种解决高度塌陷的几种方案：

解决方案一：

解决方案二：

解决方案三：

---

1.浮动高度塌陷概念

在CSS中，高度塌陷问题指的是父元素没有正确地根据其内部的浮动元素或绝对定位元素来计算自身的高度，导致父元素的高度变为0。

**2.**下面是几种解决高度塌陷的几种方案：

解决方案一：

添加一个没有实际显示效果的盒子

这个盒子主要用来撑开父盒，避免高度塌陷影响其他布局，其实h5给我们提供了伪元素 我们可以利用伪元素代替下面这个盒子。

例如以下效果图中的盒子5：

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            article{width: 1500px;
                /* 如果复合由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷为0。
                父盒高度塌陷后会影响父盒的兄弟盒子（同级元素如<article>和<footer>）的布局*/
                 /* 解决方法1（忘记）：把高度加回来就可以了 */
                 /* 解决方法2（没有办法设置高度）： */
               /* height: 900px; */
               background-color: rgb(128, 128, 128);
         
}
           #div1{width: 200px;
               height: 100px;
               background-color: rgb(255, 0, 0);
               margin-bottom: 5px;
               float:left;
}
           #div2{
            width: 200px;
               height: 100px;
               background-color: rgb(54, 252, 70);
               margin-bottom: 5px;
               float:left;
           }
           #div3{
          width: 200px;
               height: 100px;
               background-color: rgb(81, 0, 255);
               margin-bottom: 5px;
               float:right;
           }
           #div4{
            width: 200px;
               height: 100px;
               background-color: rgb(136, 0, 255);
               margin-bottom: 5px;
               float:right;
           }
           footer{
            width: 1500px;
               height: 100px;
               background-color: rgb(136, 0, 255);
          
           }
    </style>
</head>

<body>
    <article>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>
    <div id="div4">盒子4</div>
    <div style="clear:both; ">盒子5</div>
    <!-- 作用:忽略前面盒子移动对它的影响,所以盒子1的原本位置还会在 -->
    <!-- 盒子5没有实际显示效果，主要用来撑开父盒，避免高度塌陷影响其他布局
     其实h5给我们提供了伪元素 我们可以利用伪元素代替下面这个盒子。-->
    <!-- both清除前面左右浮动对我的影响 -->
</article>


</body>
</html>

<!-- 1-5在同一个浮层上 12345 -->
<!-- 当位置不够的时候，会换行 -->
 <!-- 不好的影响， -->
  <!-- 可以做导航栏 -->

解决方案二：

通过给父元素设置浮动属性，可以让父元素自动包含其内部的浮动元素。

例如：

. article {
    float: left;
}

解决方案三：

利用clear属性

clear可以用来清除其他浮动元素对当前元素的影响

|-------|-----------------------------------|
| none | 默认值，不清除浮动 |
| left | 清除左侧浮动元素对当前元素的影响 |
| right | 清除右侧浮动元素对当前元素的影响 |
| both | 清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动 |