盒子浮动
浮动元素会脱离标准流(脱标)
(1)浮动元素会一行内显示并且元素顶部对齐;
(2)浮动的元素会具有行内块元素的类似特性;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style>
.box{
/*float: left(左) rignt(右) onoe(没有浮动)*/
float:left;
width:300px;
height:300px;
background-color:orchid;
}
.box1{
float:left;
width:200px;
height:200px;
background-color:darkgoldenrod;
}
.box2{
float:right;
width:100px;
height:100px;
background-color:mediumaquamarine;
</style>
</head>
<body>
<div class="box">菜单1</div>
<div class="box1">菜单2</div>
<div class="box2">菜单3</div>
</body>
</html>