CSS編輯元素的浮動

1.元素浮動：

1）使用 float:left; 這樣的格式設置元素的浮動方式，屬性值能夠是left,right；

2）元素設置爲左浮動時，元素將從原區域浮動到瀏覽器的左側頁面；右浮動時，就會附在右側的區域，並且元素是按照第一個元素在右側的第一個位置，依次往左排列；

3）設置了浮動後，該元素至關於直接脫離元素的原來放置層，漂浮在該層之上，該元素位置下方的元素將佔用該元素的位置。

2.浮動的做用：

1）子級浮動致使父級元素的高度塌陷；

解決辦法：

1 ul{
2     /*從新設置高度*/
3     padding:10px;
4     /*觸發BFC*/
5     overflow:hidden;
6 }

2）浮動具備包裹性（浮動以後只包含內容區域）；

1 <p>
2     顯示內容
3 </p>
4 
5 p{
6    background-color:red;
7    float:left;  
8 }

執行以上代碼後，只會在「顯示內容」四個字的地方將背景色渲染成紅色。

3）行內元素設置浮動後改變了display屬性，也就能夠設置相應的content的width和height值；

1 <a href="#">點一下</a>
2 
3 a{
4    float:left;
5 }

以上代碼執行後，能夠在審查時看見 a 的width和height都可以設置具體的值，再也不是auto。

4）元素浮動不會穿過padding區域，只會在content區域中；

1 <div>
2     <em>內容</em>
3 </div>
4 
5 div em{
6     float:right;
7 }

在網頁中能夠看見「內容」只是從content原來的左側區域移動到了右側。

5）浮動會致使脫離文檔流，影響到其餘的元素。（如最上面的第三點，你們能夠本身用兩個div來驗證）