在寫html**的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子：
html4strict**：
style="width:200px;border:1px solid red;"
>
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
顯示的結果如下：
容器div沒有被撐開
大家可以看到，作為外部容器的邊框為紅色的div，沒有被撐開。這是因為內部的div因為float:left之後，就丟失了clear:both和display:block的樣式，所以外部的div不會被撐開。
我們想讓外部容器的div隨著內部div增多而增加高度，要怎麼解決呢？
以前我都是用這樣的方法來解決：
html4strict**：
style="width:200px;border:1px solid red;"
>
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="clear:both;"
>
顯示的結果如下：
顯示正常了
我們看到，在容器div內要顯示出來的float:left的所有的div之後，我們新增了這樣的乙個div：
。這樣，其實就在最後增加了clear的動作。
但是，我總覺得，這麼多加乙個div有點不妥。一是多了乙個沒有意義的div，二是在用dojo做drag & drop的時候，由於這個div是容器div的乙個字節點，如果這個節點被移動，則會造成排版上的bug：如果要顯示的藍框的div被移到這個div之後，則因為clear:both，它會被強制換一行顯示。所以，我一直在尋找更好的解決辦法。
昨天在無數次的詢問了google大仙後，我終於找到了how to clear floats without structural markup這篇文章，找到了解決的辦法。
首先設定這樣的css：
css**：
.clearfix
:after
然後，我們再修改原來的html**，讓外部的容器div來使用這個css：
html4strict**：
style="width:200px;border:1px solid red;"
class="clearfix"
>
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
style="float:left;width:80px;height:80px;border:1px solid blue;"
>
test div
在firefox裡測試一下，哈哈，這樣做的確很有效，顯示正常，而且dojo的 drag & drop 也不會有問題了。原來，這個clearfix的css使用了after這個偽物件，它將在應用clearfix的元素的結尾新增content中的內容。在這裡新增了乙個句號"."，並且把它的display設定成block；高度設為0；clear設為both；visibility設為隱藏。這樣就達到了撐開容器的目的啦。
css**：
.clearfix
:after
/* hides from ie-mac \*/
* html
.clearfix
/* end hide from ie-mac */
因為轉義字元"\"，mac ie瀏覽器會忽略掉這段hack，但windows ie不會，它會應用
* html .clearfix 來達到撐開div容器的目的（貌似mac ie沒有辦法解決這個問題，不過幸好使用者數量是在是太少了，safari支援就可以了:p）。
測試一下，果然大功告成。
div實現簡單的頁面布局
摘要 使用html和css實現簡單的旅遊 布局，從而熟練地運用css樣式，達到美觀的布局效果。html style width 780px height 150px middle right footer css樣式 body container banner globallink globalli...
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
DIV布局之position詳解
div布局之position詳解 相對定位和絕對定位 定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素 相對於 它的原始起點進...