CSS注意事項（三）

float特性

文字環繞

破壞性——脫離文檔流

包裹性——是本來固定寬度的div寬度隨內容變化

清除空格

默認img等標籤之間會有空格，添加float屬性將緊密相接

清除float

由於float致使父級元素 坍塌，因此要對其進行處理 

• 1.爲父級元素 添加 overflow:hidden
• 2.浮動父元素
• 3.在全部浮動元素下方添加一個含有clear:both的元素。
• 4.重要需掌握的方法

.clearfix:after{
content:'';
display:table;
clear:both;
}
.clearfix{
*zoom:1; //兼容IE低版本

<div class="clearfix">
   <img src="" style="float:left" />
   <img src="" style="float:left" />
</div>

position

reative

relative會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化。 
這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下.

absolute

• absolute元素脫離了文檔結構。和relative不一樣，其餘三個元素的位置從新排列了。只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌。（此時你應該能馬上想起來，float元素也會脫離文檔結構）
• absolute元素具備「包裹性」。以前的寬度是撐滿整個屏幕的，而此時的寬度恰好是內容的寬度。
• absolute元素具備「跟隨性」。雖然absolute元素脫離了文檔結構，可是它的位置並無發生變化，仍是老老實實的呆在它本來的位置，由於咱們此時沒有設置top、left的值。
• absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容.

fixed

fixed永遠根據瀏覽器來進行定位