उपयोग करना: फ्लोटिंग तत्वों को साफ करने के बाद

106

मेरे पास एक सूची है और ली की एक है float:left;। सामग्री को <ul>सही ढंग से संरेखित किया जाना चाहिए। इसलिए मैं निम्नलिखित का निर्माण कर सकता हूं:

http://jsfiddle.net/8unU8/

मैंने सोचा, कि मैं <div class="clear">छद्म चयनकर्ताओं का उपयोग करके हटा सकता हूं जैसे: के बाद।

लेकिन उदाहरण काम नहीं कर रहा है:

http://jsfiddle.net/EyNnk/

क्या मुझे हमेशा फ़्लोटिंग तत्वों को साफ़ करने के लिए एक अलग div बनाना होगा?

html css

— टॉर्बेन
स्रोत

261

इस तरह लिखें:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

इसे देखें http://jsfiddle.net/EyNnk/1/

— संदीप
स्रोत

यह इस तरह से करना चाहिये। लेकिन कृपया शब्दार्थ के बारे में मेरे उत्तर में बिंदु पर ध्यान दें।

— एलेक्स

2

बस एक मामूली जानकारी: ::afterदोहरे बृहदान्त्र के साथ छद्म तत्वों को लक्षित करने का अनुशंसित तरीका है।

— डेनिस 98

11

प्रत्येक ब्राउज़र जो डबल कोलन का समर्थन करता है (: :) CSS3 सिंटैक्स भी सिर्फ (:) सिंटैक्स का समर्थन करता है, लेकिन IE 8 केवल एकल-कोलोन का समर्थन करता है, इसलिए अभी के लिए, सर्वश्रेष्ठ ब्राउज़र समर्थन के लिए सिंगल-कोलोन का उपयोग करने की अनुशंसा की जाती है। :: छद्म चयनकर्ताओं से छद्म सामग्री को अलग करने के लिए नया प्रारूप है। यदि आपको IE 8 समर्थन की आवश्यकता नहीं है, तो डबल-कोलन का उपयोग करने के लिए स्वतंत्र महसूस करें। css-tricks.com/almanac/selectors/a/after-and-before

— retroriff

हमें इसे क्यों लगाना चाहिए: "सामग्री: ''; प्रदर्शन: ब्लॉक;" ? और अगर आपको इनलाइन रैपर चाहिए तो क्या होगा?

— Lucke

6

नहीं, आप ऐसा कुछ करने के लिए पर्याप्त नहीं हैं:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

और निम्नलिखित सीएसएस:

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

— कर्नेल पैनिक
स्रोत

5

यह भी काम करेगा:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

उदाहरण के लिए, मूल तत्व clearfixको कक्षा दें ।ul

यहाँ और यहाँ के स्रोत ।

— महदी
स्रोत

1

प्रदर्शन: तालिका अतिरिक्त रिक्ति जोड़ सकते हैं; मैं प्रदर्शन का उपयोग करता हूं: इसके बजाय

— कोग

0

पाठ 'दासदा' एक टैग के भीतर कभी नहीं होगा, है ना? शब्दार्थ और मान्य HTML के रूप में यह होने के लिए, बस स्पष्ट वर्ग को उस में जोड़ें:

http://jsfiddle.net/EyNnk/2/

— एलेक्स
स्रोत

1

यह शब्दार्थ बिल्कुल नहीं है। 1) हम हमेशा मूल तत्व को स्पष्ट करते हैं यदि उसका बच्चा आपके जवाब के अनुसार उदाहरण के लिए उस पर तैरता है यदि मैं उल में पृष्ठभूमि देना चाहता हूं तो यह LI को कवर नहीं करता है क्योंकि UL स्पष्ट नहीं है और 2) मेरा एक प्रश्न है कि आप स्पष्ट क्यों देते हैं पी से पहले एक अलग DIV में कक्षा यदि आप पी को दे ही यह भी काम है

— संदीप

0

उपयोग

.wrapper:after {
    content : '\n';
}

रोको द्वारा प्रदान किए गए समाधान की तरह। यह psuedo से पहले और बाद में: का उपयोग करके सामग्री को सम्मिलित / परिवर्तित करने की अनुमति देता है। विवरण के लिए http://www.quirksmode.org/css/content.html देखें

— साचिन कुमार
स्रोत