float詳解
标準文檔流
當一個元素浮動之後，它會被移出正常的文檔流，然後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。是以在了解浮動之前我們需要了解一下什麼是标準文檔流
标準文檔流指的是元素排版布局過程中，元素會預設自動從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
css中讓一個元素脫離标準文檔流：
浮動
絕對定位
固定定位
塊級元素和行内元素
塊級元素：
1、獨占一行
2、可以設定寬、高
3、如果不設定寬度，寬度預設為容器的100%
行内元素：
1、與其他元素同行顯示
2、不可以設定寬、高
3、寬高就是文字或圖檔的寬高
浮動的基礎知識
會使元素向左或者向右移動，隻能左右，不能上下。
浮動元素碰到包含框或另一個浮動框，浮動停止。
浮動元素之後的元素将圍繞它，之前的不受影響。
浮動元素會脫離标準流。
浮動的基本文法：
float: left 靠左浮動
float: right 靠右浮動
float: none 不使用浮動
文字環繞圖檔的原理
當我們給圖檔設定向左浮動以後，圖檔脫離文檔流，這時文字應該往上移進而被圖檔遮擋住部分的文字，但是文字有特殊的解析機制，它會在一個不被蓋住的地方顯示，是以出現了文字環圖檔的效果
使用浮動後産生的問題
高度塌陷
我們知道，一個塊級元素如果沒有設定height，其height是由子元素撐開的。對子元素使用了浮動之後，子元素會脫離标準文檔流，也就是說，父級元素中沒有内容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。
例如，對container不設定高度，對三個盒子都設定為左浮動，這時container出現了高度塌陷，浮動溢出的問題
如圖：
清除浮動的常用方法
清除浮動文法：
clear：none(預設)丨left丨right丨both
1.clear:left左側抗浮動，隻影響自身，不影響其他相鄰元素
2.clear:right右側抗浮動，隻影響自身，不影響其他相鄰元素
3.clear:both左右側抗浮動，隻影響自身，不影響其他相鄰元素
注：clear不是把元素身上的浮動清除掉，而是讓元素規定的那一側不允許有其他的浮動元素。
清除浮動常用方法常用方法
方法一：在浮動元素後使用一個空元素。例如：
方法二：給浮動元素的容器添加overflow：hidden；小的範圍
方法三：使用CSS3的：after僞元素(當下比較主流的方法) 大的盒子之類的
代碼： 給浮動元素的容器添加一個類名，如clearfix
(由于在IE比較低版本的浏覽器中使用overflow：hidden；是不能達到這樣的效果，是以需要加上 zoom:1;
是以為了讓相容性更好的話，如果需要使用overflow:hidden來清除浮動，那麼最好加上zoom:1;)
案例
nav-demo
Balbal
- Meet
- Close
- Understand
- Love
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.container{
width:100%;
margin:0auto;
}
.header{
width:100%;
background-color:gray;
overflow: hidden;
zoom:1;
}
.header .title{
width: 200px;
height: 80px;
font-size: 30px;
text-align: center;
line-height: 80px;float: left;
}
.header .nav{float: right;
overflow: hidden;
zoom:1;
padding-right: 30px;
}
.header .nav li{float: left;
margin-right: 20px;
}
.header .nav li a{
padding:020px;
height:80px;
line-height: 80px;
display: block;
font-size: 16px;
}
.header .nav li a:hover{
color:#fff;
}
顯示效果：