浮動佈局詳解

首先要理解浮動的原理(機制)：浮動的設計初衷是爲了設計文字環繞效果

 

緊接着理清浮動形成的影響：父級元素高度塌陷(包裹效應)，即父級元素沒有設寬高，寬高由子級元素撐開，當子級元素浮動後，父級的寬高爲0。在HTML裏有一個元素浮動勢必影響別的元素。

 

在IE瀏覽器下形成的問題->引伸兼容IE瀏覽器的hack寫法(面試考點)

 

_針對IE6  如寫法width:100px; 則ie6要寫成_width:100px;

*針對（IE6/7） 寫法*width

 

 \0 針對IE8,9,10,11  寫法width：400px\0

 \9針對IE6,7,8,9,10,11 寫法width:400\9

 

如何清除浮動的影響（列舉經常使用的方法）【考點】

 

在想用什麼辦法清除浮動的影響以前，首先要考慮要解決的是浮動形成什麼樣的影響。

 

清除浮動中一個比較重要 目的，就是解決父元素高度塌陷的問題。

 

清除浮動形成的影響 之二：解決浮動元素對非浮動元素形成的影響。

 

01.overflow+zoom方法： 

 

在IE6中還須要觸發haslayout

 

值能夠是hidden，也能夠是scroll（比較糾結，會形成滾動條）

.fix{

     overflow:hidden;

     zoom:1;     /*兼容IE6*/

}

 

此方法優勢在於代碼簡潔，涵蓋全部瀏覽器。

 

缺點：overflow:hidden是個小炸彈，裏面的元素要是想來個margin負值或是負的絕對定位，會致使元素直接被裁掉。

 

02.僞元素after方法：

      .clearfix {

          zoom:1;

         }

     .clearfix2:after {
               content: "\200B";      /*空的空格元素*/
               display: block; /*設置爲塊元素*/
               height: 0; /*設置寬度爲0，以避免影響別的元素正常表現*/
               clear: both; /*固然少不了清浮動*/
          }

 

只能用在包含浮動子元素的父級元素上,也就是所謂的閉合元素。通用性比較強。

 

因爲IE6/7不支持該屬性，須要觸發haslayout,即zoom:1;

 

缺點：使用不當會形成無用代碼過多。

 

03.空標籤方法：

 

就是直接一個<div style="clear:both;"></div>看成最後一個字標籤放到父標籤哪兒。

 

優勢：兼容性好、使用方便。

 

缺點：形成一個巨大的浪費，浪費了一個空標籤，並且複用性差，只能使用一次，有違結構與表現分離。

 

04.父元素一塊兒浮動：

 

此方法，因爲受浮動後的特性(脫離文檔流)影響，父元素的寬高等於子元素的寬高，不在等於塊元素默認寬，在各版本的瀏覽器下均表現同樣。

 

缺點是，父元素跟着一塊兒浮動後勢必影響別的元素。

 

還有一些不經常使用的方法：

 

05.position方法，代碼以下：

 

position-clear {

     position：absolute；

}

 

缺點太過明顯，絕對定位後會脫離文檔流

 

06.display：inline-block方法，代碼以下：

 

display-clear {

     display：inline-block;

}

 

浮動佈局的好處

 

1. 浮動可使元素block塊狀化（也就是行內元素浮動後能夠設置寬高）

 

2.可使塊元素同行排列

 

IE6下浮動元素形成雙邊距的成因與解決方法

 

成因：設置浮動塊元素的左右外邊距和左右內邊距會加倍

 

解決方法：

 

1.給浮動塊元素加display-inline屬性。

 

2.在浮動元素外面嵌套一個div，由這個div進行浮動，裏面內容設置外邊距和內邊距

 

3.position定位佈局

 

說到position定位，那首先咱們須要明白，position在咱們佈局中處於一個什麼樣的位置。

 

一般CSS+DIV佈局當中，咱們最多見的就是浮動佈局和定位佈局。平時咱們最多見的就是浮動佈局， 當在頁面當中出現多個頁面元素層疊狀態時，咱們會考慮用position定位佈局。

 

position屬性的取值：static、absolute、relative、fixed、inherit