1. 程式人生 > >清浮動的九種方式

清浮動的九種方式

兼容 寬度 abs div 方法 all line content position

1、加高

  給父級加高

問題:擴展性不好

2、父級浮動

   讓父級也浮動

問題:頁面中所有元素都加浮動,margin左右自動失效

3、inline-block 清浮動方法:

   給父級加display: inline-block;

問題:margin左右自動失效;

4、空標簽清浮動

   在浮動元素下加

  <div class="clear"></div>

.clear{height: 0px;font-size: 0px;clear: both;}

問題:IE6 最小高度 19px;(解決後IE6下還有2px偏差)

5、br清浮動

   在浮動元素下加 <br clear="all" />

問題:不符合工作中:結構、樣式、行為,三者分離的要求。

6、after偽類 清浮動方法(現在主流方法)

.clear:after{content:‘‘;display:block;clear:both;}

.clear{zoom:1;}

   after偽類: 元素內部末尾添加內容;

   :after{content"添加的內容";} IE6,7下不兼容

   zoom 縮放

a、觸發 IE下 haslayout,使元素根據自身內容計算寬高。

b、FirFox 不支持;

7.overflow:hidden 清浮動方法;

   給父級加overflow:hidden

問題:需要配合 寬度 或者 zoom 兼容IE6 IE7;

overflow: scroll | auto | hidden;

overflow:hidden;溢出隱藏(裁刀!)

8.position:absolute 清浮動方法

  給父級加position:absolute

9.position:fixed 清浮動方法

   給父級加position:fixed

清浮動的九種方式