子div元素为float时如何撑开父元素

最新推荐文章于 2024-03-20 17:44:36 发布

yqyily

最新推荐文章于 2024-03-20 17:44:36 发布

阅读量1.1k

点赞数

分类专栏：学习WEB笔记文章标签： HTML css

本文链接：https://blog.csdn.net/yqyily/article/details/50748305

版权

学习WEB笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：

该方法关键在于用clear:both清除了浮动元素，把父元素parent撑开了

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		.parent{
			border: 1px solid red;
		}
		.child1{
			float: left;width:200px;
		}
		.child2{
			float:left;width:200px;
		}
	</style>
</head>
<body>
	<div class="parent">
	<div class="child1">2</div>
	<div class="child2">3</div>
	<div style="clear: both;"></div>
	</div>
</body>
</html>

方法二：

该方法的重点在于，子元素有float后，父元素需要设置一个overflow：hidden；，这样就可以撑开父元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		.parent{
			border: 1px solid red;
			overflow: hidden;
		}
		.child1{
			float: left;width:200px;
		}
		.child2{
			float:left;width:200px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child1">2</div>
		<div class="child2">3</div>
	</div>
</body>
</html>