主流清浮動方法

時間 2019-11-09

標籤主流浮動方法简体版

原文原文鏈接

 
     浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到 塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。 
   
        正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。 
   
主流清浮動方法： 
   after僞類： 元素內部末尾添加內容； 
  
           :after{content"添加的內容";} IE6，7下不兼容 
  
   zoom 縮放 
  
           a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。 
  
           b、FF 不支持； 
  
       .clearfix:before, .clearfix:after {   
      
       content 
       : 
       "" 
       ;   
      
       display 
       :table;   
      
       }   
      
       .clearfix:after{   
      
       clear 
       : 
       both 
       ;   
      
       overflow 
       : 
       hidden 
       ;   
      
       }   
      
       .clearfix{   
      
           * 
       zoom: 
       1 
       ;   
      
       }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。