总结Margin重叠现象

最新推荐文章于 2025-06-14 14:01:45 发布

BRCOCOLI

最新推荐文章于 2025-06-14 14:01:45 发布

阅读量849

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_34446253/article/details/51438432

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了HTML布局中'普通元素'与'浮动元素'之间的相互作用，具体阐述了'普通与普通大者取大'原则以及'普通对普通大者取大'、'浮动与普通无影响'和'浮动与浮动两者相加'的现象。通过实际代码示例，直观展示不同元素布局策略。

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

普通与普通大者取大

<!DOCTYPE html>
<html>
<head>
	<title>box test</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: black;
			margin-bottom: 50px;
			
		}
		#box1{
			width: 300px;
			height: 100px;
			background: blue;
			margin-top: 50px;
			
		}
	
	</style>
</head>
<body>
	<div id="box"></div>
	<div id="box1"></div>
	
</body>
</html>

float 与 float两者相加

<!DOCTYPE html>
<html>
<head>
	<title>box test</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: black;
			margin-bottom: 50px;
			float: left;
		}
		#box1{
			width: 1900px;
			height: 100px;
			background: blue;
			margin-top: 50px;
			float: left;
		}
		
	</style>
</head>
<body>
	<div id="box"></div>
	<div id="box1"></div>
</body>
</html>

float对普通无影响

<!DOCTYPE html>
<html>
<head>
	<title>box test</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: black;
			margin-bottom: 50px;
			float: left;
		}
		#box1{
			width: 300px;
			height: 100px;
			background: blue;
			margin-top: 50px;
			float: left;
		}
		#box2{
			background: green;
	
			height: 300px;
			width: 1800px;
			
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>