（1.浮動是一種脫離標准文檔流的形式。
作用：浮動就是用來制作多個盒子並排顯示，也能設置寬高，負責網頁排版
| 1 float:left; 左浮動 2 float:right; 右浮動 3 float:none; 不浮動 |
浮動的元素，會自動貼着父元素盒子的邊。
左浮動：貼左邊；
右浮動：貼右邊；
重點：瀏覽器認為浮動的元素是不存在(不會占標准流的位置，占浮動流的位置)，所以會影響后面的元素。
2.浮動的注意事項
浮動屬性可以理解為一個國家，也有自己的憲法：
| 1、浮動的元素可以設置width、height、margin、padding 2、浮動的元素不區分行塊元素，都能設寬高，並排顯示，不獨占一行 3、浮動的元素不接受display轉換顯示模式，因為浮動的元素沒有行內、塊級元素之分 4、浮動的元素如不設置寬高，會自動收縮寬度，會根據內容撐開 5、浮動的元素不占標准流的位置 6、浮動的元素不能設置margin:0 auto;居中 |
3.清除浮動
為什么要清除浮動？
描述：因為子元素浮動了不會被父級包住，兒子都浮動了，就脫離標准流，那么父親還是標准流，就撐不開高度。如果要讓它兒子元素的內容撐開高度，就給父親清除子級浮動對自己造成的影響。
總結應用場景：當父級沒給高度，子級也浮動了，這時就要清除浮動。
1.clear清除浮動屬性（清除浮動的牆放在浮動元素父盒子內部的最后。只要子類浮動，就在父類的最后內部添加清除浮動屬性）
解決：浮動互相影響，高度自適應
缺點：1、html結構布局，很多要進行浮動，每個浮動的盒子都需要添加一堵牆。頁面結構會顯得很復雜，出了很多沒有意義的標簽。
2、一個盒子內的標簽要浮動就都浮動，浮動后面的牆是一個標准流元素。
2.overflow屬性
盒子內部元素可以設置溢出模式,隱藏或自動顯示.
overflow:hidden;
overflow:auto;
overflow屬性也能清除盒子內部元素的浮動影響，只需要給受影響的父親加。
解決了浮動互相影響，高度自適應。
優勢：能解決所有的問題，不會增加無用的標簽。
注意：如果子元素的內容超出父盒子的范圍，內容會被隱藏。
3.偽類清除法
1、定義.clearfix:after類樣式
| 1 .clearfix:after{ 2 content:""; 3 clear:both; 4 visibility:hidden;/*占位隱藏*/ 5 height:0; 6 display:block; /*轉為塊級元素*/ 7 } 8 .clearfix{zoom:1;/*兼容IE6/7瀏覽器*/} |
2、在受浮動影響的父級盒子添加這個類
| 1 <div class="box1 clearfix"> 2 <p>1</p> 3 <p>2</p> 4 <p>3</p> 5 <p>4</p> 6 </div> |