浮动：
解决一行中显示多个盒子的问题，并且这些盒子的位置可控
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>
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
