HTML浮动定位

最新推荐文章于 2024-06-19 19:16:24 发布

⑧讲⑤德

最新推荐文章于 2024-06-19 19:16:24 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45993305/article/details/103619113

版权

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

摘要由CSDN通过智能技术生成

浮动代码

浮动定位：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>
	</b

最低0.47元/天解锁文章

⑧讲⑤德

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML浮动定位

浮动代码浮动定位：float代码示例讲解浮动定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .lmj{ width: 400px;...
复制链接

扫一扫