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來驗證）