float
CSS定位机制
普通流（标准流）：
元素会自动的从左往右，从上往下排列
块级元素：独占一行，可以设置宽高，如果不设置，默认为100%
行内元素：不可以设置宽高，宽高就是文字的宽高
浮动：
只能横向移动元素，当浮动元素碰到包含框或另一个浮动框，浮动停止，浮动元素之后的元素将围绕它，之前的不受印象，浮动元素会脱离标准流
float:left
float:right
float:none
清除浮动语法：
clear: none ｜ left | right | both
1.在浮动元素后使用一个空元素
例如：<div class=“clear”></div>
2.给浮动元素的容器添加
overflow:hidden;
3.使用css3的：after伪元素
.clearfix:after{
content”.”
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1
}4.给父级元素定义height，
5 父级元素也浮动
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>nav_demo</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
.container{
width:1200px;
margin:0 auto;
}
.header{
width:1200px;
background:#ccc;
overflow:hidden;
zoom:1;
}
.header .logo{
width:200px;
height:80px;
float:left;
margin:0 40px;
}
.header .nav{
padding-right:40px;
float:right;
overflow:hidden;
zoom:1;
}
.header .nav li{
float:left;
margin-right:20px;
}
.header .nav li a{
padding:0 20px;
height:80px;//???必须吗？
line-height:80px;
display:block;
font-family:“微软雅黑”;
font-size:16px;
color#333;
}
.header .nav li a:hover{
color:#fff;
}
.main .footer{
font-size:22px;
}
.main{
width:1200px;
overflow:hidden;
}
.main .con{
width:1000px;
height:500px;
background:blue;
float:left;
}
.main .sidebar{
width:200px;
height:500px;
background:orange;
float:left;
}
.footer{
width:1200px;
height:20px;
background:red;
}
</style>
</head>
<body>
<div class=“container”>
<div class=“header”>
<div class=“logo”>
<a herf=“#”><img src=“./img/logo.png”></a>
</div>
<ul class=“nav”>
<li><a herf=“#”>免费课程</a></li>
<li><a herf=“#”>职业路径</a></li>
<li><a herf=“#”>实战</a></li>
<li><a herf=“#”>猿问</a></li>
<li><a herf=“#”>手记</a></li>
</ul>
</div>
<div class=“main”>
<div class=“con”>content</div>
<div class=“sidebar”>sidebar</div>
</div>
<div class=“footer”>footer</div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。