``` 浮動： float ``` 占CSS3 三分之一的比重 如果一個網站只有標準文檔流，很多效果是不能實現的，如果要實現非標準流的頁面就必須讓標簽去標準化，讓標簽脫離標準文檔流的方法： 浮動和定位 浮動屬性是專門用于進行網頁并排布局的 作用：脫離的標準文檔流，不在受元素等級限制（比如行內元素，塊級，行內塊）。 又可以并排顯示，又可以設置寬高 flosat:屬性 屬性值：left,right ``` flosat:left; //左浮動 flosat:right; //右浮動 ``` 浮動特性： 元素會按照書寫的順序依次貼邊 同一個父盒子既可以設置左浮動，也可以設置右浮動 所有兄弟元素，如果一個收浮動了，剩下的所有兄弟元素必須設置浮動 如果浮動元素不設置寬度，不會撐滿父盒子，而被內容撐寬 代碼如下： ``` .zuo{ float:left; ????} .you{ float:right; ????} <p class="zuo">1</p> <p class="you ">2</p> <p class="zuo">3</p> <p class="you ">4</p> <p class="zuo" >5</p> <p class="you " >6</p> <p class="zuo" >7</p> <p class="you ">8</p> <p class="zuo">9</p> <p class="you ">10</p> ``` 效果如下：