网页基础（十八）浮动

最新推荐文章于 2024-04-19 05:45:25 发布

@大娱乐家

最新推荐文章于 2024-04-19 05:45:25 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104638030

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<!--
        	浮动:float
        	-left 左浮动
        	-right 右浮动
        	浮动后脱离标准文档流 变成一个非标准文档流（块元素和行内元素都可以浮动）
        	块元素浮动后就变成一个特殊的行内元素 失去独占一行的资格
        	浮动元素紧贴着上一个浮动元素变成父元素 如果宽度不够 将会换行
        	
        -->
		<style>
			.d1{
				height: 100px;
				width: 100px;
				background-color: #880000;
				float: right;
			}
			.d2{
				height: 150px;
				width: 150px;
				background-color: #0000FF;
				float: right;
			}
			.d3{
				height: 200px;
				width: 300px;
				background-color: #008000;
				float: right;
			}
			span{
				float: right;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：770267939@qq.com
        	时间：2020-03-03
        	描述：快捷键:div.d$*3
        -->
		<div class="d1">盒子1</div>
		<div class="d2">盒子2</div>
		<div class="d3">盒子3</div>
	</body>
</html>