浮動屬性（float)

（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>