当元素定义float:left时，下一行div clear:both后，margin-top不生效

最新推荐文章于 2024-04-26 09:22:03 发布

FOR=10000

最新推荐文章于 2024-04-26 09:22:03 发布

阅读量648

点赞数 1

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/weixin_43099985/article/details/85786677

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

只需设置一个容器把上面一行浮动元素包起来，如果浮动元素有relative属性时，再定一个清浮动的div，让容器撑开！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	.item1{
		width:100px;
		height:200px;
		border:1px solid #333;
		float:left
	}
	.item2{
		width:200px;
		height:100px;
		clear:both;
		background:#333;
		margin-top:10px
	}
	.item3{
		position:relative;
		top:-3px
	}
	.innerBOX{

	}
</style>
</head>
<body>

<div class="box">
	<div class="innerBOX">
		<div class="item1"></div>
		<div class="item1 item3"></div>
		<div class="item1"></div>
		<div style="clear:both"></div>
	</div>
	<div class="item2"></div>
</div>

<script>

</script>
</body>
</html>