一、元素浮動的意義及使用：
1. 浮動的意義：設置了浮動屬性的元素會脫離普通標准流的控制，移動到其父元素中指定的位置的過程，將塊級元素放在一行，浮動會脫離標准流，不占位置，會影響標准流，浮動只有左右浮動，不會出現上下浮動。
2. 浮動的使用：基本語法格式：選擇器{float:屬性值;}
left 元素向左浮動 right 元素向右浮動 none 元素不浮動
二、元素浮動的特性：
1. 浮動的元素脫離了標准文檔流，擺脫塊級元素和行內元素的限制
1）這是兩個div盒子以及一個span元素在沒有設置浮動情況下的樣子：
2）這是兩個div盒子以及一個span元素在同時設置浮動情況下的樣子：
3）比較進行分析，在三個盒子同時設置了浮動的情況下，名為box2的div的盒子脫離了標准文檔流，漂浮到了box1盒子的右邊，而名為box3的span的行內元素，可以設置寬高等屬性並且脫離了標准文檔流，漂浮到了box2盒子的右邊。由此，可以進行驗證分析出來了，浮動的元素可以擺脫標准文檔流的控制，進行漂浮，不遵循自上到下的順序，同時行內元素也可以轉換為行內塊級元素，設置寬高對齊屬性等，塊級元素也可以轉換為行內塊級元素，與其漂浮的盒子在一行等等，擺脫了塊級元素和行內元素的限制。
2. 浮動的元素存在相互貼靠的效果，當寬度不夠的時候，會出現自動換行
1）這是三個不同的div盒子在沒有設置浮動的情況下的樣子：
2）這是三個不同的div盒子在設置浮動的情況下的樣子：
3）比較進行分析，在三個div盒子同時設置了浮動的情況下，三個盒子處於相互貼靠的狀態，由於三個div盒子的寬度之和大於總的盒子的寬度，導致第三個盒子就自動進行換行了，漂浮移動到box1盒子的下面了，仍保持相互貼靠。由此，可以進行驗證分析出來，浮動的元素存在相互貼靠的效果，當寬度不夠的時候，會自動換行。
3. 浮動的元素雖然脫離了標准文檔流，但是沒有脫離文本流，出現被字包圍的效果
1）這是一個div盒子加一段文字在沒有設置浮動的情況下的樣子：
2）這是一個div盒子加一段文字在設置浮動的情況下的樣子：
3）比較進行分析，在這個div盒子加一段文字后，不設置浮動，文字在盒子的下方。但是在設置盒子的浮動之后，文字會將盒子進行包圍，出現字包圍的效果。由此，可以進行分析出，浮動的盒子會脫離了標准文檔流，但不脫離文本流，出現字包圍的效果。
4. 浮動之后的元素會存在收縮的效果，當一個塊級元素沒有設置寬度的時，當塊級元素浮動之后，就會失去高度
1）這是一個沒有設置寬度，只設置了高度的div盒子在沒有設置浮動的情況下的樣子：
2）這是一個沒有設置寬度，只設置了高度的div盒子在設置浮動的情況下的樣子：
3）比較進行分析，在一個div塊級元素沒有設置寬度的情況下，默認是占據這個顯示屏幕的全部寬度，但是當這個div設置浮動之后，這個塊級元素就會沒有高度，進行收縮，顯示為空白。由此，可以進行分析出，浮動之后的元素會存在收縮的效果，當一個塊級元素沒有設置寬度的時候，進行浮動，就會失去高度。
5. 當父元素不設置高度的時候，多個子元素的高度和撐起了父元素的高度；當設置浮動后，子元素最高的高度撐起了父元素的高度。
1）這是一個沒有設置高度的父元素，里面含有三個子元素div盒子，三個子元素div的高度和撐起了父元素的高度：
2）這是一個沒有設置高度的父元素，里面含有三個子元素，在設置浮動之后，三個子元素中高度最高的那個子元素撐起了父元素的高度：
3）比較進行分析，當在父元素不設置高度的時候，三個子元素的高度之和撐起了父元素的高度，在給三個子元素設置浮動之后，子元素中高度最高的那個元素撐起了整個父元素的高度。由此，可以進行分析出，當父元素不設置高度的時候，多個子元素的高度和撐起了父元素的高度，當設置浮動后，子元素最高的高度撐起了父元素的高度。
三、浮動的弊端：
1. 導致高度塌陷，當子元素同時設置浮動后，父元素失去支撐，父元素的高度消失，縮成一條線。
1）當對於所有的子元素都設置了浮動之后，而父元素沒有去設置高度，父元素失去了支撐同時父元素的高度消失，縮成一條線，高度進行了塌陷：
2）解決辦法：在父元素失去高度，發生塌陷之后，可以給父元素添加高度或者設置overflow:hidden的方法進行解決高度塌陷的問題。
2. 頁面結構的不穩定性，子元素浮動，導致標准文檔流出現空白區域。對於這個解決辦法是
1）當對於子元素無序列表中的li進行浮動以后，而父元素不變，子元素的位置會發生偏差，導致標准文檔流出現空白區域：
2）解決辦法：clear:both; 去進行解決，這也是稱之為隔牆法。
四、浮動的清除：
1. 清除浮動，可以通過.clearfix:after{clear:both;} 進行解決。
2. 解決IE6兼容問題，可以通過 .clearfix{zoom:1;} 進行解決 。
3. 解決雙倍margin，可以通過 .clearfix:before,.clearfix:after{content:" ";display:table;} 進行解決。
4. 綜合最佳解決方案，推薦使用：
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1}