CSS之清除浮動 span clearfix

一、問題描述

web網頁設計中，在div元素中有時候常伴有**結合的post元件。為了使得文字在影象周圍環繞，那麼需要對影象區域使用float浮動。如果不做清除浮動，則會出現如下結果：

影象比文字高，且影象脫離並超出了父級元素的文件流。

原始碼：

h3>肖像攝影

h3>

眼神鋒利，嘴裡叼著煙的畫家；神情嚴肅，姿態自信的泥瓦匠；笑容憨厚，略有些拘謹的拳擊手...... 600 多張不同年齡、職業的德國人的肖像，充滿個性，又有著一脈相承的直率和倔強。這些作品來自一位以拍攝肖像而著名的德國攝影師——奧古斯特·桑德（august sander，1876-1964）。

section

div>

body

html

原因分析：

此處的div父級元素只能識別出子元素文字部分的高度，而影象比文字更高，所以高出部分就露出來了。那麼，為了使得影象不超出母元素的高度，就必須進行float的浮動清除。

二、解決方案一

原始碼：在父級元素內的末尾處加上span[display:block;height:0;clear:both]

<
span 
style
="display: block;clear: left;padding: 15px;background-color: red;"
>
span
>

解釋：在浮動元素的後面兄弟元素(一般是末尾元素)中，加入span元素(display:block,clear:left(or right(根據浮動方向來)))：

原因：塊級元素(display:block)要獨佔一塊文件流(且獨立一行)，再清除一下前面浮動兄弟元素的浮動方向的浮動，那本來應該浮動的span清除浮動後，自然要獨佔一行了(去掉padding後，對整體文件無影響)。

效果：

缺點：蠻力【需要強行加入span並新增其樣式】：增加工作量；不利於頁面優化　

二、解決方案二【推薦】

原始碼：為div父級元素，設定公用類.clearfix

.clearfix:after

/* .clearfix:before*/

解釋：略（見原始碼仔細領會）

效果：

優點：元件化設計的思想，可以大面積公用；提高生產效率，也有利於頁面優化

三、參考文件:

1.《網路設計的原理》|檜山佐知子：防止使用float時版面被破壞