子元素用了浮动float导致父级div不能自适应高度

꧁༺蓝冰༻꧂

于 2022-02-16 10:43:24 发布

阅读量404

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_46664972/article/details/122958484

版权

前端专栏收录该内容

10 篇文章

订阅专栏

该案例展示了如何利用CSS中的overflow:hidden属性来隐藏超出父元素边界的子元素内容，以此实现布局的整洁。通过在父级div上设置此属性，可以确保两个浮动的子元素（div1和div2）不会导致页面布局混乱。

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

案例：
在这里插入图片描述

方法1（推荐）：
在父级div加上overflow: hidden;属性

<!DOCTYPE html>
<html>
	<head>
		<title>标题</title>
		<style type="text/css">
			.div {
				border: 2px solid red;
				overflow: hidden;
			}

			.div1 {
				width: 300px;
				height: 200px;
				background-color: #00ffff;
				float: left;
			}

			.div2 {
				width: 300px;
				height: 200px;
				background-color: #ffff00;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="div1">我是DIV1</div>
			<div class="div2">我是DIV2</div>
		</div>
	</body>
</html>