<!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>
<!--
作者：[email protected]
时间：2020-03-03
描述：快捷键:div.d$*3
-->
<div class="d1">盒子1</div>
<div class="d2">盒子2</div>
<div class="d3">盒子3</div>
</body>
</html>
