用CSS清除修復和未摺疊的邊緣而沒有副作用？

什麼是一般好的方式來清除和uncollapse頁邊距與CSS沒有副作用（也不額外的HTML元素）？用CSS清除修復和未摺疊的邊緣而沒有副作用？

下引起副作用（並想避免它們）：

設置overflow: hidden或overflow: auto：剪輯box-shadow，CSS轉換和其他內容一個可能要條條框框顯示。因此它不能在幾種情況下使用（但其他方面效果很好）。
設置border或padding：明顯的定位/尺寸效應。

2013-02-21 Qtax

有關'overflow：hidden'或'overflow：auto'的有趣之處在於裁剪內容是使用該屬性的全部要點......它解析浮動的事實是真正的副作用。 – BoltClock 2013-02-24 12:16:39

@BoltClock，邊緣和填充邊緣塌陷方面同樣有趣。 – Qtax 2013-02-27 01:37:48

明確和崩潰修復的基礎上，this clear fix，與新增保證金uncollapse：

.group:before, /* :before to uncollapse the top margin */ 
.group:after{ 
    display: block; 
    clear: both; /* clear fix */ 
    content: "\a0 "; /* &nbsp; - just a space doesn't uncollapse margins */ 
    visibility: hidden; /* make sure not to show anything */ 
    height: 0; 
} 
.group{ 
    zoom: 1; /* solves it all for IE < 8, and doesn't hurt other browsers */ 
}

演示：jsFiddle，IE7 render with netrenderer

注意content: "\a0 ";相當於 並代替的非空白字符（例如.），以便當您選擇該塊並複製它時，可以執行而不是獲得額外的可見字符，否則會在某些瀏覽器中發生（例如IE9）。

這種解決方案的缺點是：

:before和:after定義，因此需要特別關注採取，如果他們使用。
對於每個希望應用此修補程序的新選擇器，必須指定選擇器3次。
不是很短/微不足道。

YUI, described in this article（但沒有 ）使用了類似的解決方案。

來源

2013-02-21 16:26:49 Qtax

這種clearfix技術只需要較少的CSS：http://nicolasgallagher.com/micro-clearfix-hack/ – cimmanon 2013-02-21 17:19:16

@cimmanon，很好，使用'display：table'而不是'block'來簡化它。這應該是另一個答案，隨時發佈。 – Qtax 2013-02-21 18:03:38

用CSS清除修復和未摺疊的邊緣而沒有副作用？

回答

相關問題