HTML浮动定位

最新推荐文章于 2024-03-01 08:45:11 发布

原创

最新推荐文章于 2024-03-01 08:45:11 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML中的浮动定位，包括float属性的使用。通过代码示例展示了浮动元素如何脱离文档流，停靠在父元素的左侧或右侧，并分析了浮动元素的几个关键特性：脱离文档流、文本环绕、行内元素行为等。同时探讨了多个浮动元素在同一行的效果及潜在问题。

浮动代码

浮动定位：float

代码示例讲解

浮动定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.lmj{
				width: 400px;
				height: 400px;
				background-color: blue;
				border: 1px solid black;
			}
			.mj1{
				width: 100px;
				height: 100px;
				background-color: red;
				border: 1px solid black;
			}
			.mj2{
				width: 100px;
				height: 100px;
				background-color: purple;
				border: 1px solid black;
			}
			.mj3{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="lmj">
			<div class="mj1"></div>
			<div class="mj2"></div>
			<div class="mj3"></div>
		</div>
	</body>
</html>

这段代码里面的lmj1里面嵌套了mj1~mj3三个元素我们来看看没有加入