css - एक div के भीतर फ़्लोटिंग तत्व, div के बाहर तैरता है। क्यूं कर?




html css-float (6)

मान लें कि आपके पास एक div है, कहें कि आप इसे हरा रंग देते हैं और इसे एक निश्चित चौड़ाई देते हैं, जब मैं इसके अंदर सामान डालता हूं, तो मेरे मामले में एक आईएमजी और दूसरा div। विचार यह है कि कंटेनर div की सामग्री कंटेनर div को फैलाने का कारण बनती है, और सामग्री के लिए पृष्ठभूमि बनती है। लेकिन जब मैं ऐसा करता हूं, तो युक्त div गैर-फ़्लोटिंग ऑब्जेक्ट्स को फिट करने के लिए सिकुड़ता है, और फ्लोटिंग ऑब्जेक्ट्स या तो सभी तरह से बाहर हो जाएंगे, या आधे से बाहर, आधे में, और बड़े div के आकार पर कोई असर नहीं होगा।

ऐसा क्यों है? क्या मुझे कुछ याद आ रहा है, और मैं एक युक्त div की ऊंचाई को फैलाने के लिए फ़्लोट किए गए आइटम कैसे प्राप्त कर सकता हूं?


कारण

समस्या यह है कि फ़्लोटिंग तत्व out-of-flow :

एक तत्व प्रवाह से बाहर कहा जाता है अगर यह तैरता है, बिल्कुल तैनात है, या मूल तत्व है।

इसलिए, वे आसपास के तत्वों को in-flow तत्व के रूप में प्रभावित नहीं करते हैं।

यह 9.5 फ्लोट्स में समझाया गया है:

चूंकि एक फ्लोट प्रवाह में नहीं है, इसलिए फ्लोट बॉक्स प्रवाह के पहले और बाद में बनाए गए गैर-स्थानित ब्लॉक बॉक्स जैसे फ्लोट मौजूद नहीं था। हालांकि, फ्लोट के बगल में बनाए गए वर्तमान और बाद के लाइन बक्से फ्लोट के मार्जिन बॉक्स के लिए जगह बनाने के लिए आवश्यक हैं।

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

यह 10.6 में ऊंचाई और मार्जिन की गणना भी निर्दिष्ट है। "सामान्य" ब्लॉक के लिए ,

सामान्य प्रवाह में केवल बच्चों को ध्यान में रखा जाता है (यानी, फ़्लोटिंग बक्से और पूरी तरह से स्थित बक्से को नजरअंदाज कर दिया जाता है [...])

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

हैकी समाधान: निकासी

समस्या को हल करने का एक तरीका सभी फ्लोट्स के नीचे कुछ इन-फ्लो तत्व को मजबूर करना है। फिर, माता-पिता की ऊंचाई उस तत्व को लपेटने के लिए बढ़ेगी (और इस प्रकार भी तैरती है)।

यह clear संपत्ति का उपयोग करके हासिल किया जा सकता है:

यह संपत्ति इंगित करती है कि किसी तत्व के बॉक्स (एसएस) के किनारे पहले फ़्लोटिंग बॉक्स के नजदीक नहीं हो सकते हैं

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}
<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

तो एक समाधान clear: both साथ एक खाली तत्व जोड़ रहा है clear: both फ्लोट के अंतिम भाई के रूप में

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

हालांकि, यह अर्थपूर्ण नहीं है। माता-पिता के अंत में एक pseudo-element उत्पन्न करें:

.clearfix::after {
  clear: both;
  display: block;
}

इस दृष्टिकोण के कई प्रकार हैं, उदाहरण के लिए बहिष्कृत सिंगल कोलन सिंटैक्स का उपयोग करना :after पुराने ब्राउज़र का समर्थन करने के :after , या display: table जैसे अन्य block-level डिस्प्ले का उपयोग करना।

समाधान: बीएफसी जड़ें

शुरुआत में परिभाषित समस्याग्रस्त व्यवहार का अपवाद है: यदि कोई ब्लॉक तत्व ब्लॉक स्वरूपण संदर्भ (बीएफसी रूट है) स्थापित करता है, तो यह इसकी फ़्लोटिंग सामग्री को भी लपेट देगा।

ब्लॉक स्वरूपण संदर्भ जड़ों के लिए 10.6.7 'ऑटो' ऊंचाई के अनुसार,

यदि तत्व में कोई फ़्लोटिंग वंशज है जिसके नीचे मार्जिन एज तत्व के नीचे सामग्री किनारे से नीचे है, तो ऊंचाई किनारों को शामिल करने के लिए बढ़ा दी जाती है।

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}
<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

इसके अतिरिक्त, जैसा कि 9.5 फ्लोट समझाया गया है, बीएफसी जड़ें निम्न कारणों से भी उपयोगी हैं:

एक तालिका का सीमा बॉक्स, एक ब्लॉक-स्तर प्रतिस्थापित तत्व, या सामान्य प्रवाह में एक तत्व जो एक नया ब्लॉक स्वरूपण संदर्भ स्थापित करता है [...] उसी ब्लॉक स्वरूपण संदर्भ में किसी भी फ्लोट के मार्जिन बॉक्स को ओवरलैप नहीं करना चाहिए क्योंकि तत्व स्वयं ।

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

एक ब्लॉक स्वरूपण संदर्भ द्वारा स्थापित किया गया है

  • visible अलावा overflow साथ ब्लॉक बॉक्स, उदाहरण के लिए hidden

    .bfc-root {
      overflow: hidden;
      /* display: block; */
    }
    
  • ब्लॉक कंटेनर जो ब्लॉक बॉक्स नहीं हैं: जब display inline-block , table-cell या table-caption

    .bfc-root {
      display: inline-block;
    }
    
  • फ़्लोटिंग तत्व: जब float left या right सेट होता है।

    .bfc-root {
      float: left;
    }
    
  • बिल्कुल स्थित तत्व: जब position absolute या fixed सेट होती fixed

    .bfc-root {
      position: absolute;
    }
    

ध्यान दें कि उन लोगों के अवांछित संपार्श्विक प्रभाव हो सकते हैं, जैसे अतिप्रवाह सामग्री को क्लिप करना, shrink-to-fit एल्गोरिदम के साथ ऑटो चौड़ाई की गणना shrink-to-fit , या बाहर प्रवाह होना। तो समस्या यह है कि बीएफसी स्थापित करने वाले दृश्य ओवरफ्लो के साथ इन-फ्लो ब्लॉक-स्तरीय तत्व होना संभव नहीं है।

प्रदर्शन एल 3 इन मुद्दों को संबोधित करता है:

प्रवाह लेआउट डिस्प्ले प्रकारों को बेहतर ढंग से व्यक्त करने के लिए flow और flow-root आंतरिक प्रदर्शन प्रकारों का निर्माण किया और तत्व को BFC रूट बनाने के लिए एक स्पष्ट स्विच बनाने के लिए बनाया। (यह हैक की आवश्यकता को खत्म करना चाहिए ::after { clear: both; } और overflow: hidden [...])

अफसोस की बात है, अभी तक कोई ब्राउज़र समर्थन नहीं है। आखिरकार हम इसका उपयोग करने में सक्षम हो सकते हैं

.bfc-root {
  display: flow-root;
}

अपने फ़्लोटिंग div(s) रखें और सीएसएस में इसे overflow:hidden;
यह ठीक काम करेगा।


कुछ मामलों में, यानी जब (यदि) आप केवल "लाइन" पर तत्वों का प्रवाह करने के लिए float का उपयोग कर रहे हैं, तो आप इसका उपयोग कर सकते हैं

display: inline-block;

के बजाय

float: left;

अन्यथा, अंत कार्यों में एक clear तत्व का उपयोग करके, भले ही यह अनाज के खिलाफ जा सके, ताकि सीएसएस के काम को करने के लिए तत्व की आवश्यकता हो।


चूंकि लुकास कहते हैं, जो आप वर्णन कर रहे हैं वह फ्लोट संपत्ति के लिए इच्छित व्यवहार है। कई लोगों को क्या भ्रमित करता है कि सीएसएस लेआउट मॉडल में कमियों के लिए फ्लोट को अपने मूल उद्देश्य से परे धक्का दिया गया है।

Floatutorial पर एक नज़र Floatutorial यदि आप इस संपत्ति को कैसे काम करते हैं, इस बारे में बेहतर समझना चाहते हैं।


धन्यवाद LSerni आप इसे मेरे लिए हल किया।

इसे पाने के लिये :

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

तुम्हें यह करना ही है :

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

यहां अधिक आधुनिक दृष्टिकोण है:

.parent {display: flow-root;} 

कोई और स्पष्टफिक्स नहीं।

पीएस अतिप्रवाह का उपयोग: छुपा; बॉक्स-छाया छुपाता है ... भी





css-float