क्यों <div class="clear"></div> एक कंटेनर डीआईवी में एकाधिक फ़्लोटिंग डीवीवी के बाद प्रयोग किया जाता है?

Question

मुझे कई स्थानों पर <div class="clear"></div> का सामना करना पड़ा है, लेकिन मुझे नहीं पता कि यह क्यों किया जाता है? क्या कोई मुझे इस पर संक्षिप्त कर सकता है, इसका उपयोग सीएसएस में क्यों किया जाता है? यह सीएसएस है:

div.clear { 
    clear:both; 
} 

Answer 1

एक तत्व की ऊंचाई अपने बच्चे तत्वों से निर्धारित होता है (जब तक यह स्पष्ट रूप से सेट किया जाता है)। उदा .:

+------A------+ 
|+-----------+| 
||  B  || 
|+-----------+| 
|+-----------+| 
||  C  || 
|+-----------+| 
+-------------+ 

एक की ऊंचाई जहां इसकी बच्चे सी के निचले सीमा है से निर्धारित होता है। ,

+------A------+ 
+--+---------++ 
    | B | 
    +---------+ 
    +---------+ 
    | C | 
    +---------+ 

एक तत्व एक न्यूनतम ऊंचाई तक संकुचित हो जाता है, क्योंकि इसके दो बच्चे हैं:

अब, चल तत्वों को उनके माता-पिता की ऊंचाई में शामिल नहीं होते, वे नियमित रूप से प्रवाह से बाहर ले जाया जाता है जारी।

समाशोधन तत्वों सही ऊंचाई बहाल करने के लिए शुरू की जाती हैं:

+------A------+ 
| +---------+| 
| | B || 
| +---------+| 
| +---------+| 
| | C || 
| +---------+| 
|+-----D-----+| 
+-------------+ 

डी तत्व clear विशेषता निर्धारित के साथ एक शून्य ऊंचाई तत्व है। इससे फ़्लोट किए गए तत्वों के नीचे गिरने का कारण बनता है (यह उन्हें साफ़ करता है)। इससे ए के कारण इसकी ऊंचाई की गणना करने के लिए नियमित बाल तत्व होता है। कम से कम यह सबसे आम उपयोग मामला है।

अतिरिक्त HTML तत्वों को पेश करने के लिए अक्सर बेहतर समाधान ए को overflow: hidden सेट करना है। इसका ऊंचाई ऊंचाई को मजबूर करने का असर पड़ता है, जिसकी वांछित आकार की ऊंचाई बढ़ने का एक ही प्रभाव होता है। हालांकि इस समाधान के अन्य दुष्प्रभाव हो सकते हैं या नहीं।

Answer 2

यह फ़्लोटिंग शैलियों को साफ़ करना है।

स्पष्ट: http://www.w3.org/wiki/CSS/Properties/clear

फ्लोट: http://www.w3.org/wiki/CSS/Properties/float

Answer 3

इसे समेटने के लिए, यह ब्राउज़र को कुछ भी अनुमति देने की अनुमति देने जैसा नहीं है (यानी, कोई तत्व यह एक div, span, एंकर, टेबल इत्यादि) या तो पिछले तत्व के बाएं या दाईं ओर स्थित है। यह अगला तत्व अगली पंक्ति में ले जाएगा।

Answer 4

जब हम फ़्लोट आधारित लेआउट के साथ कोड लिखते हैं तो सबसे आम समस्याएं यह होती हैं कि माता-पिता div कंटेनर बच्चे के फ़्लोटिंग तत्वों की ऊंचाई तक विस्तार नहीं करता है। इसे ठीक करने के लिए सामान्य समाधान फ़्लोटिंग तत्वों के बाद स्पष्ट पैर के साथ तत्व जोड़ना या पैरेंट div में एक स्पष्ट फ़िक्स जोड़ना है।

मैं तुम्हें तैरता समाशोधन के बारे में बेहतर समझ के लिए कुछ दो अच्छे उदाहरण दे रहा हूँ: - deceze द्वारा

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Answer 5

अच्छा explaination। लेकिन <div class="clear"></div> पुराना तरीका और अव्यवसायिक कोशिश

#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; } 

का उपयोग कर बस अन्य तत्व है जो #firstlement:after, .secondelement:after तरह मंजूरी दे दी और इतने पर करने की जरूरत है जोड़ने रखना है।