css清除浮動主要方法

標籤：clear   style   瀏覽器   hidden   span   oat   使用   問題   頁面   

1、浮動元素尾部添加空div標籤，設定css為clear：both；

缺點：如果頁面浮動布局多，則需要添加較多div；

 

2、父級元素定義偽類：after和zoom：1；

.father:after{display:block;clear:both;content:"";visibility:hidden;height:0}.father{zoom:1}

推薦使用，定義公用類，減少css代碼；

 

3、父級元素使用overflow：hidden；

原理：父級元素還必須設定boom：1或者width，且不能定義高度，因為使用overflow：hidden時，瀏覽器會自動檢測浮動地區的高度；

缺點：不能配合position使用；

 

4、父級元素添加display：table；

缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用；

 

而外不推薦使用的方法有：父級元素定義float；使用overflow：auto；

 

css清除浮動主要方法