浮動效果
滿足我們的頁面排版要求，使豎列的盒子橫向的排列起來。
負作用：因為浮動元素脫離了標準文件流，會導致父級元素無法被撐開。

解決方式：清除浮動負面效果（三種方式）

1. 新增空盒子
   優點：較流行
   缺點：為清除浮動，頁面新增的空盒子太多，新手容易暈
   用法：在浮動元素後面（同級元素）新增一個空的div，並且定義一個clear類，附給該div
   .clear{clear:both;}

2. overflow:hidden
   優點：較簡單，兼容於市面瀏覽器
   缺點：負面效果不詳，暫不推薦使用
   用法：定義clear類，並把clear類附給浮動元素的父級元素
   .clear{display:block;overflow:hidden;}

3. 最流行、最常用、可相容所有瀏覽器
   用法：定義clear類，使用偽元素:after，並把clear類附給浮動元素的父級元素
   .clear:after{display: block;clear: both;content:”.”;visibility: hidden;height:0;}
   .clear{zoom: 1;}

說明：
1. display:block 以塊級元素顯示
2. display:inline 以行內元素顯示
3. visibility的作用是把.隱藏