关于float的浮动无法撑起宽高问题

最新推荐文章于 2022-09-01 17:58:39 发布

原创最新推荐文章于 2022-09-01 17:58:39 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #float浮动 #无法撑起宽高

html前端专栏收录该内容

3 篇文章

订阅专栏

当使用float浮动布局时，父级元素无法正确获取子元素的宽高。本文介绍了五个解决办法：1) 添加清浮动div；2) 设置固定宽高（不适用于内容动态变化的情况）；3) 使用overflow属性；4) 将li元素display设为inline-block；5) 利用伪元素清除浮动。这些方法能帮助修复父级元素的尺寸问题。

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

关于float的浮动无法撑起父级元素宽高的问题

项目开发过程常常遇到一个问题，在使用float之后，会发现父级元素的宽高无法撑起，写一段代码来尝试一下

<div class="main">
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
			<li>列表6</li>
		</ul>
	</div>

这一段是代码html的结构，下面加上css的样式

<style>
		img {
			width:200px;
			height:200px;
		}
		.main {
			border:1px solid #333;
		}
		ul {
			list-style:none;
		}
	</style>

诊断代码运行后得到的效果：在这里插入图片描述
而我们想要的是列表横向排列，为li元素加上浮动效果,

li {
	float:left;
	border:1px solid #333;
}

此时我们会发现外层的div宽高并没有被撑开，会出现如下效果: 在这里插入图片描述
查阅资料发现，造成原因是因为float浮动效果会使浮动元素脱离普通文档流，所以没法撑起父级元素的宽高，解决问题大概有以下几种办法，都能得到预期效果：
最终效果

解决办法一：

在最后一个li元素后面加上一个div，设置div的class属性为div{clear:both}，这样清除了浮动效果，会撑起父级宽高

解决办法二

给父级元素设置固定宽高，但是由于网站开发往往会遇到li元素内容是动态的，此方法并不太好

解决办法三

为父级元素设置overflow属性为auto或者hidden，都能达到效果

ul{
	overflow:auto;
}

解决办法四

设置li元素的display为inline-block

li{
	display:inline-block;
}

解决办法五

使用伪元素

ul:after{
	content:'';
	display:block;
	clear:both;
}