html - आप फ्लोट किए गए तत्वों के माता-पिता को गिरने से कैसे रोकते हैं?




css layout (11)

समाधान 1:

सबसे भरोसेमंद और अव्यवस्थित विधि यह प्रतीत होता है:

डेमो: http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

सीएसएस:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

एक छोटे सीएसएस लक्ष्यीकरण के साथ आपको पैरेंट DIV कक्षा जोड़ने की भी आवश्यकता नहीं है।

यह समाधान IE8 के पीछे पीछे संगत है, इसलिए आपको पुराने ब्राउज़र विफल होने की चिंता करने की आवश्यकता नहीं है।

समाधान 2:

समाधान 1 पर एक अनुकूलन का सुझाव दिया गया है और निम्नानुसार है:

डेमो: http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

सीएसएस:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

यह समाधान IE5.5 के पीछे पीछे संगत प्रतीत होता है लेकिन यह अनचाहे है।

समाधान 3:

display: inline-block; सेट करना भी संभव है display: inline-block; और width: 100%; ढहने के दौरान एक सामान्य ब्लॉक तत्व अनुकरण करने के लिए।

डेमो: http://jsfiddle.net/SO_AMK/ae5ey/

सीएसएस:

.clearfix {
    display: inline-block;
    width: 100%;
}

यह समाधान IE5.5 के पीछे पीछे संगत होना चाहिए, लेकिन केवल आईई 6 में परीक्षण किया गया है।

इस प्रश्न का उत्तर यहां दिया गया है:

यद्यपि <div> जैसे तत्व सामान्य रूप से अपनी सामग्री को फिट करने के लिए बढ़ते हैं, float संपत्ति का उपयोग करके सीएसएस के नए लोगों के लिए एक चौंकाने वाली समस्या हो सकती है: यदि फ्लोट किए गए तत्वों में गैर-फ्लोट किए गए मूल तत्व होते हैं, तो माता-पिता गिर जाएंगे।

उदाहरण के लिए:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

इस उदाहरण में अभिभावक div अपने फ़्लोट किए गए बच्चों को शामिल करने के लिए विस्तारित नहीं होगा - इसमें height: 0

आपके द्वारा इस समस्या को कैसे हल किया जाएगा?

मैं यहां समाधानों की एक विस्तृत सूची बनाना चाहता हूं। यदि आप क्रॉस-ब्राउज़र संगतता समस्याओं से अवगत हैं, तो कृपया उन्हें इंगित करें।

समाधान 1

माता-पिता को फ़्लोट करें।

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

पेशेवर : अर्थपूर्ण कोड।
विपक्ष : आप हमेशा माता-पिता को तैरना नहीं चाहते हैं। यहां तक ​​कि यदि आप करते हैं, तो क्या आप माता-पिता के माता-पिता को तैरते हैं, और इसी तरह? क्या आप हर पूर्वजों के तत्व को तैरना चाहिए?

समाधान 2

माता-पिता को एक स्पष्ट ऊंचाई दें।

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

पेशेवर : अर्थपूर्ण कोड।
विपक्ष : लचीला नहीं - यदि सामग्री में परिवर्तन होता है या ब्राउज़र का आकार बदल जाता है, तो लेआउट टूट जाएगा।

समाधान 3

मूल तत्व के अंदर एक "स्पेसर" तत्व संलग्न करें, इस तरह:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

पेशेवर : कोड के लिए सीधे।
विपक्ष : अर्थपूर्ण नहीं; स्पेसर div केवल एक लेआउट हैक के रूप में मौजूद है।

समाधान 4

अभिभावक को overflow: auto सेट करें overflow: auto

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

पेशेवर : अतिरिक्त div की आवश्यकता नहीं है।
विपक्ष : एक हैक की तरह लगता है - यह overflow संपत्ति का उद्देश्य नहीं है।

टिप्पणियाँ? अन्य सुझाव?


अजीब कोई भी इस के लिए एक पूर्ण जवाब के साथ आया है, आह यहाँ अच्छा है।

समाधान एक: स्पष्ट: दोनों

शैली के साथ एक ब्लॉक तत्व जोड़ना स्पष्ट: दोनों; उस बिंदु पर फ्लोट को साफ़ कर देगा और उस तत्व के माता-पिता को गिरने से रोक देगा। http://jsfiddle.net/TVD2X/1/

पेशेवर: आपको नीचे वर्णित तत्व और तत्वों को साफ़ करने की अनुमति देता है जो उपरोक्त फ़्लोट किए गए तत्वों और वैध सीएसएस द्वारा प्रभावित नहीं होंगे।

विपक्ष: फ़्लोट्स को साफ़ करने के लिए एक और टैग की आवश्यकता है, मार्कअप को फूलाएं।

नोट: आईई 6 पर वापस आने के लिए और इसके लिए प्रमुख माता-पिता (यानी इनपुट तत्व) पर काम करने के लिए आप इसका उपयोग करने में सक्षम नहीं हैं: बाद में।

समाधान दो: प्रदर्शन: तालिका

प्रदर्शन जोड़ना: तालिका; माता-पिता को इसे फ्लोट से दूर करने और सही ऊंचाई के साथ प्रदर्शित करने के लिए। http://jsfiddle.net/h9GAZ/1/

पेशेवर: कोई अतिरिक्त मार्कअप और बहुत साफ है। आईई 6 + में काम करता है

विपक्ष: आईई 6 और 7 में सबकुछ अच्छा लगता है यह सुनिश्चित करने के लिए अमान्य सीएसएस की आवश्यकता है।

नोट: आईई 6 और 7 चौड़ाई ऑटो का उपयोग चौड़ाई 100% + पैडिंग को रोकने के लिए किया जाता है, जो कि नए ब्राउज़र में नहीं है।

अन्य "समाधान" पर एक नोट

ये फिक्स सबसे कम समर्थित ब्राउज़र पर वापस काम करते हैं, वैश्विक स्तर पर 1% उपयोग (आईई 6), जिसका अर्थ है: इसे काटने के बाद।

छुपा ओवरफ्लो सामग्री दिखाता है लेकिन तत्व को गिरने से नहीं रोकता है और इसलिए सवाल का जवाब नहीं देता है। इनलाइन ब्लॉक का उपयोग करने में छोटी गाड़ी के परिणाम हो सकते हैं, अजीब मार्जिन वाले बच्चे और इतने पर, टेबल बहुत बेहतर है।

ऊंचाई निर्धारित करना पतन को "रोक" देता है लेकिन यह उचित समाधान नहीं है।

अमान्य सीएसएस

अमान्य सीएसएस ने कभी भी किसी को चोट नहीं पहुंचाई, असल में, अब यह आदर्श है। ब्राउज़र उपसर्ग का उपयोग करना ब्राउज़र विशिष्ट हैक्स का उपयोग करने के समान ही अमान्य है और अंत उपयोगकर्ता को कभी भी प्रभावित नहीं करता है।

निष्कर्ष के तौर पर

मैं उपर्युक्त समाधानों का उपयोग करता हूं ताकि तत्व सही ढंग से प्रतिक्रिया कर सकें और एक-दूसरे के साथ अच्छी तरह से खेल सकें, मैं आपको ऐसा करने के लिए आग्रह करता हूं।


इसे नीचे पैरेंट div में जोड़ें

 <div style="clear:both"></div>

एक और संभावित समाधान जो मुझे लगता है कि अधिक अर्थात् सही है, फ्लोट किए गए आंतरिक तत्वों को 'प्रदर्शन: इनलाइन' के रूप में बदलना है। इस उदाहरण और जब मैं इस पृष्ठ पर आया था तब मैं क्या काम कर रहा था, दोनों एक ही तरह से उसी तरह से चलने वाले divs का उपयोग करते हैं। Divs का उपयोग करने के बजाय, अवधि पर स्विच करें, या यदि आप किसी अन्य तत्व का उपयोग कर रहे हैं जो डिफ़ॉल्ट रूप से 'डिस्प्ले: इनलाइन' के बजाय 'डिस्प्ले: ब्लॉक' है, तो इसे 'डिस्प्ले: इनलाइन' के रूप में बदलें। मेरा मानना ​​है कि यह 100% अर्थात् सही समाधान है।

समाधान 1, माता-पिता को तैरना, अनिवार्य रूप से पूरे दस्तावेज़ को फ़्लोट करने के लिए बदलना है।

समाधान 2, एक स्पष्ट ऊंचाई निर्धारित करना, एक बॉक्स को चित्रित करना और कह रहा है कि मैं यहां एक तस्वीर डालना चाहता हूं, यानी यदि आप एक आईएमजी टैग कर रहे हैं तो इसका उपयोग करें।

समाधान 3, फ्लोट को साफ़ करने के लिए एक स्पेसर जोड़ना, आपकी सामग्री के नीचे एक अतिरिक्त रेखा जोड़ना है और आसपास के तत्वों के साथ भी गड़बड़ कर देगा। यदि आप इस दृष्टिकोण का उपयोग करते हैं तो आप शायद div को ऊंचाई के रूप में सेट करना चाहते हैं: 0px।

समाधान 4, अतिप्रवाह: ऑटो, यह स्वीकार कर रहा है कि आप दस्तावेज़ को कैसे रखना है और आप यह स्वीकार नहीं कर रहे हैं कि आप नहीं जानते कि क्या करना है।


मेरी पसंदीदा विधि मूल तत्व के लिए एक स्पष्टफिक्स वर्ग का उपयोग कर रही है

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

मैं आमतौर पर overflow: auto उपयोग करता हूं overflow: auto चाल; यद्यपि यह नहीं है, सख्ती से बोलने के लिए इच्छित उपयोग, कड़ाई से संबंधित है - यह निश्चित रूप से याद रखना आसान बनाने के लिए पर्याप्त है। float: left का अर्थ float: left इस उदाहरण में आईएमओ में ओवरफ्लो की तुलना में विभिन्न उपयोगों के लिए float: left दिया गया है।


यद्यपि कोड पूरी तरह से अर्थपूर्ण नहीं है, मुझे लगता है कि इसमें प्रत्येक फ्लोटर के साथ प्रत्येक कंटेनर के निचले भाग में "समाशोधन div" कहने के लिए यह अधिक सरल है। असल में, मैंने प्रत्येक प्रोजेक्ट के लिए अपने रीसेट ब्लॉक में निम्न शैली नियम शामिल किया है:

.clear 
{
   clear: both;
}

यदि आप आईई 6 (ईश्वर आपकी मदद करते हैं) के लिए स्टाइल कर रहे हैं, तो आप इस नियम को 0px लाइन-ऊंचाई और ऊंचाई भी दे सकते हैं।



समस्या तब होती है जब एक फ़्लोटेड तत्व एक कंटेनर बॉक्स के भीतर होता है, वह तत्व स्वचालित रूप से कंटेनर की ऊंचाई को फ्लोट किए गए तत्व में समायोजित नहीं करता है। जब कोई तत्व फ़्लोट किया जाता है, तो उसके माता-पिता में अब यह नहीं होता है क्योंकि फ्लोट प्रवाह से हटा दिया जाता है। आप इसे ठीक करने के लिए 2 विधियों का उपयोग कर सकते हैं:

  • { clear: both; }
  • clearfix

एक बार जब आप समझ रहे हैं कि क्या हो रहा है, तो नीचे दिए गए विधि का उपयोग "clearfix" करने के लिए करें।

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

प्रदर्शन :)


auto या hidden लिए ओवरफ्लो बदलने के साथ आपको जो मुख्य समस्या मिल सकती है वह यह है कि सब कुछ मध्य माउस बटम के साथ स्क्रोल करने योग्य हो सकता है और उपयोगकर्ता संपूर्ण साइट लेआउट को गड़बड़ कर सकता है।


निकोलस गैलाघर और थिएरी कोब्लेंटज़ के साथ मुख्य लेखकों के रूप में स्पष्टफिक्स के कई संस्करण हैं।

यदि आप पुराने ब्राउज़र के लिए समर्थन चाहते हैं, तो इस साफ़फिक्स का उपयोग करना सबसे अच्छा है:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

एससीएसएस में, आपको निम्न तकनीक का उपयोग करना चाहिए:

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

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

यदि आपको पुराने ब्राउज़र के लिए समर्थन की परवाह नहीं है, तो एक छोटा संस्करण है:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}






css-float