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

Question

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

http://jsfiddle.net/8unU8/

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

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

http://jsfiddle.net/EyNnk/

मैं हमेशा चल तत्वों स्पष्ट करने के लिए एक अलग div बनाने के लिए है?

Answer 1

लिखें इस तरह:

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

चेक इस http://jsfiddle.net/EyNnk/1/

Answer 2

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

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

Answer 3

नहीं, आप नहीं यह काफी कुछ इस तरह करना है:

<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%; 
} 

Answer 4

उपयोग

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

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

Answer 5

यह रूप में अच्छी तरह से काम करेगा:

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

.clearfix:after { 
    clear: both; 
} 

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

, अपने ul तत्व माता पिता तत्व को वर्ग clearfix दें उदाहरण के लिए।

स्रोत here और here।