浮动:
解决一行中显示多个盒子的问题,并且这些盒子的位置可控
float:left
float:right
标准流:浏览器默认摆放盒子的标准
浮动的特点:
浮动的元素会脱离标准流:
如果一个元素按照正常的标准来显示会在html中所属的位置占位,后面的元素会紧跟着他,但是浮动脱离了标准流,将来在看到浮动的元素之后,不能以正常的标准来进行判断
浮动以后的元素会覆盖标准流的元素之上
浮动规则:浮动找浮动,不浮动找不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*
{
padding: 0;
margin: 0;
}
.nav
{
width: 980px;
height: 50px;
background-color: gainsboro;
margin: 0 auto;
}
.logo
{
width: 980px;
height: 100px;
background-color: paleturquoise;
margin: 0 auto;
}
.content
{
width:980px;
height: 500px;
background-color: peachpuff;
margin: 0 auto;
}
.mess
{
width: 980px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.foot{
width: 980px;
height: 50px;
background: palegreen;
margin: 0 auto;
}
.left
{
width: 300px;
height: 500px;
background-color: crimson;
float: left;
}
.right
{
width: 660px;
height: 500px;
background-color: orchid;
float: right;
}
div
{
margin-top:3px !important;
}
</style>
</head>
<body>
<div class="nav">
导航
</div>
<div class="logo">
商标
</div>
<div class="mess">
页面信息
</div>
<div class="content">
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="foot">
底部
</div>
</body>
</html>