CSS 浮动高度塌陷问题及清浮动

最新推荐文章于 2024-10-30 16:57:22 发布

原创最新推荐文章于 2024-10-30 16:57:22 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

2 篇文章

订阅专栏

当子元素浮动且父元素未设定高度时，会出现高度塌陷问题，导致父元素无法正确显示其背景色。文章通过代码示例展示了这个问题，并提出了解决方案——使用clearfix类来清除浮动。通过在浮动元素的父元素上添加clearfix类，可以避免高度塌陷，保持布局的正常显示。

出现原因： 1.子元素浮动 2.父元素无浮动 3.父元素高度为自动（也就是没有设置高度）

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style>
        html, body, ul, li {
            margin: 0;padding: 0;
        }
        ul,li {
            list-style: none;
        }
        .box {
            background-color: #c4c4c4;
        }
        .item {
            width: 40px;
            height: 40px;
            background-color: #4682B4;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li class="item"></li>
    </ul>
</body>
</html>

效果

在这里插入图片描述
这里，ul 标签没有设置高度，底色灰色在页面上可以看到。li标签设置了40px的高，这时候ul标签被子标签li撑开，页面上效果确实就是我们希望的效果。

当我们给li 添加浮动后
其他代码不变

.item {
    float: left;/* 浮动 */
    margin: 0 10px;/* 多个 li之间区分 */
    width: 40px;
    height: 40px;
    background-color: #4682B4;
}

<ul class="box">
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
</ul>

在这里插入图片描述
这时候会发现ul的灰色不见了。我们希望通过li撑开ul 并且展示ul 的目的没有达到。这时候就触发浮动时高度塌陷的问题。也就是文章一开始提到的三个条件，在这个时候都满足了。如果没有满足上面的条件就不会出现这种情况。

解决方法，最常用的方法：

.clearfix {
	  zoom: 1;
}
.clearfix:after {
	  content: " ";
	  clear: both;
	  font-size: 0;
	  line-height: 0;
	  height: 0;
	  display: block;
	  visibility: hidden;
}

将上面的代码复制到css 中。并且在出现高度坍塌的元素上，也就是浮动元素的父元素上添加上 clearfix。

<ul class="box clearfix">
  	<li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

这样就可以解决高度塌陷的问题。同样的也可以破坏文章一开始提到的三个条件来解决。