CSS編輯元素的浮動，CSS編輯元素浮動

CSS編輯元素的浮動，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來驗證）