上下浮动div位置的不同结果也会不同

最新推荐文章于 2023-03-28 20:51:45 发布

于丸

最新推荐文章于 2023-03-28 20:51:45 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Ych_cxy/article/details/99619753

css 专栏收录该内容

11 篇文章

订阅专栏

探讨了HTML中div元素的浮动属性与行内块元素的布局特性，展示了不同元素顺序如何影响页面显示效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.d1{
				background: red;
				height: 200px;
				width: 200px;

			}
			.d2{
				float: left;
				height: 100px;
				background: green;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="d2"></div>
		<div class="d1"></div>
	</body>
</html>

结果大家都知道如果d1比d2小的话那就看不见他了,因为他被d2挡住了
上结果
在这里插入图片描述
但是如果俩个div的位置互换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.d1{
				background: red;
				height: 200px;
				width: 200px;

			}
			.d2{
				float: left;
				height: 100px;
				background: green;
				width: 100px;
			}
		</style>
	</head>
	<body>

		<div class="d1"></div>
		<div class="d2"></div>
		
	</body>
</html>

结果就是浮动不会覆盖人家div
在这里插入图片描述
但是如果div变成了行内块元素，但是无论他在浮动前还是浮动后，都会紧邻这个浮动的div，因为inline-block 可以使用 width 和 height 限制宽高，同时也会将元素放在它前面的内容旁边