[CSS]破版的解決方法

如果一個母元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在母元素內放背景，卻沒有顯示，該如何解決？

答案是母元素本身會沒有高度，必須實作 clear-fix (self-clear) 或是在內部塞任一新元素並設置 clear: both X元素才能包覆子元素



一般來說，我都會使用overflow:(auto | hidden)，但會影響排版的困擾，加上 CSS 3 的陰影效果又特別多，超過物件被裁了不就什麼都看不到了嗎？

這裡由 Nicolas Gallagher 提出更簡單更直覺的做法
又稱 micro clearfix
也是目前 .clearfix 的原型
原始碼如下：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

在頭跟尾的部份是包覆裡面區塊的內容就可以保護邊界重曡的情況發生

現在的 .clearfix 基本是這個方式來改造的
都常是因為不希望這兩堵牆有實際佔的空間
所以加上 line-height 設為 0px 而已