float浮动造成高度塌陷的解决办法

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

圣遗式

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

阅读量967

点赞数 10

本文链接：https://blog.csdn.net/weixin_42592145/article/details/104458622

版权

文章探讨了在CSS布局中遇到的浮动元素导致父元素高度塌陷的问题，列举并解析了解决这个问题的四种常见方法：1) 设置固定高度；2) 使用overflow:hidden或auto；3) 添加clear:both的空元素；4) 利用伪对象清除浮动。每种方法的优缺点进行了说明，为开发者提供了选择依据。

摘要由CSDN通过智能技术生成

Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。
但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。就像下面这样

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{width: 400px;border: 1px solid #000;}
			.boxl{width: 200px;height: 200px;float: left;background: red;}
			.boxr{width: 100px;height: 100px;float: right;background: orangered;}
		</style>
	</head>
	<body>
		<div class="box1">纸
			<div class="boxl">大火</div>
			<div class="boxr">小火</div>
		</div>
	</body>
</html>

很显然，纸是包不住火的。
但是这显然不是我们想要的那样。我们希望能使用浮动调整内部的布局，又希望父元素不会高度塌陷，要怎样做呢？我总结了四种方法。</

最低0.47元/天解锁文章

圣遗式

关注

10
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。就像下面这样<html> <head> <meta charset="utf-8"> <title><...
复制链接

扫一扫