前端學習案例-清除浮動的四種方式

清除浮動的方法：

1. 額外标簽法：給誰清除浮動，就在其後額外添加一個空白标簽 。

   優點：通俗易懂，書寫友善。（不推薦使用）

   缺點：添加許多無意義的标簽，結構化比較差。

給元素small清除浮動（在small後添加一個空白标簽clear(類名可以随意），設定clear:both;即可）

1. 父級添加overflow方法：可以通過觸發BFC的方式，實作清楚浮動效果。

   優點：代碼簡潔（慎重使用，若該父盒子裡還有position定位會引起麻煩）

   缺點：内容增多時候容易造成不會自動換行導緻内容被隐藏掉，無法顯示需要溢出的元素。

注意：别加錯位置，是給父親加（并不是所有的浮動都需要清除，誰影響布局，才清除誰。）

1. 使用after僞元素清除浮動：：after方式為空元素的更新版，好處是不用單獨加标簽了。（較常用）

   優點：符合閉合浮動思想，結構語義化正确

   缺點：由于IE6-7不支援：after，使用zoom：1，觸發hasLayout。

注意：這個也是給父親添加 clearfix

1. 使用before和after雙僞元素清除浮動：（較常用）