在寫html**的時候，創造在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子：
testdiv
cssbbs
testdiv
testdiv
testdiv
執行這段**，大家可以看到，作為外部容器的邊框為紅色的div，沒有被撐開。這是因為內部的div因為float:left之後，就喪失了clear:both和display:block的樣式，所以外部的div不會被撐開。
我們想讓外部容器的div隨著內部div增多而增加高度，要怎麼解決呢？
以前我都是用這樣的法子 來解決：
testdiv
testdiv
testdiv
testdiv
testdiv
我們看到，在容器div內要顯示出來的float:left的所有的div之後，我們新增了這樣的乙個div：
。這樣，其實就在最後增加了clear的動作。
但是，我總感覺，這麼多加乙個div有點不妥。一是多了乙個沒有意義的div，二是在用dojo做drag&drop的時候，由於這個div是容器div的乙個字節點，如果這個節點被移動，則會造成排版上的bug：如果要顯示的藍框的div被移到這個div之後，則因為clear:both，它會被強制換一行顯示。所以，我一直在尋找更好的解決措施。
解決的措施：
首先設定這樣的css：
css**：
**:.clearfix:after
然後，我們再修正原本的html**，讓外部的容器div來應用這個css：
html4strict**：
.clearfix:after
* html .clearfix
在firefox裡測試一下，哈哈，這樣做的確很有效，顯示正常，而且dojo的 drag & drop也不會有問題了。原本，這個clearfix的css應用了after這個偽物件，它將在利用clearfix的元素的結尾新增content中的內容。在這裡新增了乙個句號"."，並且把它的display設定成block；高度設為0；clear設為both；visibility設為潛藏。這樣就達到 了撐開容器的目標啦。
但是，在文章中說，windows ie並不支撐這樣做。所以要讓ie也完善顯示，則必須在clearfix這個css定義的後面加上一些專門為ie設定的hack。css如下：
css**：
**:.clearfix:after
* html .clearfix
因為轉義字元"\"，mac ie涉獵器會漠視 掉這段hack，但windows ie不會，它會利用 * html .clearfix 來達到 撐開div容器的目標（貌似macie沒有措施解決這個問題，不過幸好使用者數量是在是太少了，safari支撐就可以了:p）
clearfix after 清除css浮動
在寫html 的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子 test div cssbbs test div test div test div 執行...
clearfix after的用法，清除浮動
今天回顧一下css中的清除浮動 所有主流瀏覽器都支援 after 偽元素。clearfix after.clearfix 不知道有什麼用處，不加ie7也沒有問題 測試 html head title new document title meta name generator content edi...
用狀態機實現鍵盤消抖
一直用狀態機做鍵盤消抖，覺得很好用，不必延時等待鍵盤穩定，當檢測到有鍵按下或彈起時能發出相應的鍵盤訊息，英文不好，只好用拼音做變數名和函式名，將就看吧 設定狀態機有4種狀態，a0，a1,a2,a3 初始時處於a0狀態，當掃瞄發現有鍵按下時，轉入到a1狀態。當處於a1狀態時，當掃瞄發現有鍵按下並且鍵值...