12
960 ग्रिड के स्पष्टफिक्स बनाम एचटीएमएल 5 बॉयलरप्लेट के स्पष्टफिक्स - क्या अंतर है?960 ग्रिड के स्पष्टफिक्स बनाम एचटीएमएल 5 बॉयलरप्लेट के स्पष्टफिक्स - क्या अंतर है?
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
और यहाँ clearfix पॉल आयरिश का HTML5 बॉयलरप्लेट में पाया जाता है:
यहाँ clearfix नाथन स्मिथ के 960 ग्रिड के सीएसएस में पाया है
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
आप देख सकते हैं वे कर रहे हैं बहुत समान। हालांकि वे अलग हैं।
क्या किसी के पास इसमें कोई अंतर्दृष्टि है?
कौन सा बेहतर है और क्यों?
visibility: hidden;
width: 0;
उसके अलावा, वे समान हैं:
पर हैं मुझे ऐसा लगता है कि: से पहले घोषणा एक clearfix के दायरे से बाहर है। यह वास्तविक कहा गया उद्देश्य मार्जिन ढहने के साथ करना है। मैं इसका उपयोग करता हूं: पहले और: जेनरेट की गई सामग्री के बाद पर्याप्त नहीं है कि मैं नहीं चाहता कि उन्हें मनमाने ढंग से उपयोग किया जाए जब मुझे उनकी आवश्यकता न हो। मैं फ्लोट क्लीयरिंग को ठीक करने के लिए एक स्पष्टफिक्स चाहता हूं। बस इतना ही। तो इसे आगे सरल बनाया जा सकता है: '.clearfix: {content:" "के बाद; प्रदर्शन: तालिका; दोनों को साफ करो; } .clearfix {ज़ूम: 1; } ' –
: आईई 6/7 के फ्लोट्स और अन्य ब्राउज़रों के प्रतिपादन के बीच दृश्य स्थिरता जोड़ने से पहले। यदि आप इसे नहीं चाहते हैं, तो यह निश्चित रूप से छोटा हो सकता है। –