CSS系列2-定位3：清除浮动1

最新推荐文章于 2025-01-02 15:03:56 发布

a_302

最新推荐文章于 2025-01-02 15:03:56 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏：漫漫艰辛路文章标签： css 浮动

本文链接：https://blog.csdn.net/a_302/article/details/45868159

漫漫艰辛路专栏收录该内容

13 篇文章

订阅专栏

本文通过一个具体的实例，详细解析了使用浮动属性时遇到的高度塌陷问题，并探讨了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动在布局上给我们带来了很多的方便，那么它有没有不足之处呢？

假设我们现在要做一个CSDN博客的这个样式

我们写下如下代码

<pre name="code" class="html"><html>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<head>
		<title>test</title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				font-size:14px;
			}
			ul li{
				float: left;
				height: 39px;
				margin: 0 5px;
				padding: 0 25px;
				border:1px solid #eee;
				border-radius:5px 5px 0px 0px;
				background-color:#ccc;
				color:#3B5998;
				line-height:39px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>发表文章</li>
			<li>文章管理</li>
			<li>类别管理</li>
			<li>评论管理</li>
			<li>博客配置</li>
			<li>博客栏目</li>
			<li>草稿箱</li>
			<li>回收站</li>
		</ul>
	</body>
</html>

得到了这样的效果

看上去我们基本实现了CSDN的这样一个效果，并且这个效果应该有这么一个结构，那就是我有一个ul包裹着这些li，像这样

现在我们设置一下ul的背景色background-color:#000让它显示出来。很可惜，没有达到我们预期的效果

可以看到，在设置了背景色之后，页面并没有显示出ul，同时我们在浏览器调试的时候发现ul的尺寸为944*0，也就是说我们的ul没有高度。

当我们的li不设置浮动的时候，ul是可以根据li自动调整自己的尺寸的，如图所示，取消浮动后黑色ul立即显示出来了

那么这是为什么呢？

浮动和绝对定位类似，不再属于文档的普通流中，因此事不会影响到块级框的布局的（对内联框会有影响）。因此文档普通流会表现出浮动元素不存在时的样子，也就是说包含框不会自动改变自己的高度而是默认为0，因为它认为它里面没有内容啊。这种现象也就是所说的“高度塌陷”现象。这个现象在我们实际不居中是不愿意看到的，因为这会对我们之后的元素布局造成影响，因此，清除浮动就变得很重要。