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

Question

कहते हैं कि आपके पास एक है div, इसे एक निश्चित रूप दें widthऔर इसमें तत्व डालें, मेरे मामले में imgऔर एक div।

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

ऐसा क्यों है? क्या कोई ऐसी चीज़ है जो मुझे याद आ रही है, और मैं कैसे heightयुक्त वस्तुओं को बाहर निकाल सकता हूँ div?

Answer 1

सबसे आसान overflow:hiddenमाता-पिता पर डाल दिया है और एक ऊंचाई निर्दिष्ट नहीं है:

#parent { overflow: hidden }

एक अन्य तरीका यह भी है कि अभिभावक div:

#parent { float: left; width: 100% }

एक अन्य तरीका एक स्पष्ट तत्व का उपयोग करता है:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

सीएसएस

span.clear { clear: left; display: block; }

Comments

यह काम करता है, लेकिन अब मैं दो बार भ्रमित हूं: क्या इसके लिए कोई स्पष्टीकरण है या यह सिर्फ यह कैसे है?

— 5

हां, एक स्पष्टीकरण है, लेकिन मैं इसे भूल गया हूं :( इसका सिर्फ यह कैसे है। यह overflow:hiddenब्राउज़र को सबसे अच्छा यह माता-पिता के बच्चे के तत्वों को शामिल करने के लिए मजबूर कर सकता है। यही कारण है कि यह इसे ठीक करता है।

— डौग नीनेर

मुझे लगता है कि इसके लिए स्पष्टीकरण overflow: hiddenयहां है: लिंक । और बहुत बहुत धन्यवाद, इसने मेरे लिए काम किया

— विकास अरोरा

@DavidR सबसे आसान स्पष्टीकरण यह है कि html / css एक दिनांकित, खराब विचार है, और प्रौद्योगिकी का खराब रूप से लागू किया गया टुकड़ा है। वास्तव में, यह तर्क वास्तव में html / css quirks का बहुत कुछ बताता है, जब से आपने इस पोस्ट को बनाया है, इसमें कोई संदेह नहीं है।

— थोड़ा सा

ध्यान रखें कि overflow: hiddenमूल तत्व के किसी भी भाग को छिपाना होगा जो मूल कंटेनर से बाहर निकलता है। मेरे लिए, इससे पाठ के कुछ अंश अप्राप्य हो गए।

— टॉप कैट

Answer 2

कारण

समस्या यह है कि फ्लोटिंग तत्व बाहर-बाहर हैं :

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

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

यह 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कि तैरने के अंतिम भाई के रूप में है

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

हालाँकि, यह शब्दार्थ नहीं है। तो बेहतर है कि जनक के अंत में एक छद्म तत्व उत्पन्न करें :

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

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

हल: बीएफसी की जड़ें

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

ब्लॉक प्रारूपण संदर्भ जड़ों के लिए 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>

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

• overflowअन्य के साथ ब्लॉक बॉक्स visible, जैसेhidden

  .bfc-root {
    overflow: hidden;
    /* display: block; */
  }

• ब्लॉक कंटेनर जो ब्लॉक बॉक्स नहीं हैं: जब displayसेट किया जाता है inline-block, table-cellया table-caption।

  .bfc-root {
    display: inline-block;
  }

• फ़्लोटिंग तत्व: जब या के floatलिए सेट है ।leftright

  .bfc-root {
    float: left;
  }

• पूरी तरह से तैनात तत्व: जब या के positionलिए सेट है ।absolutefixed

  .bfc-root {
    position: absolute;
  }

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

L3 इन मुद्दों को प्रदर्शित करें :

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

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

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

Comments

इसलिए फ्लोट किए गए बक्से उनके माता-पिता के कंटेनरों द्वारा मान्यता प्राप्त नहीं हैं, इसलिए ऊंचाई गिर जाती है, लेकिन उनके भाई-बहनों द्वारा मान्यता प्राप्त हैं, इसलिए स्पष्ट?

— सिमलिंक

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

— ओरियल

"भाई-बहन जो कि BFC रूट नहीं हैं, सीधे ब्लॉक (लेकिन उनकी लाइन बॉक्स हैं) से प्रभावित नहीं होते हैं।" - क्या आप कृपया इसे स्पष्ट कर सकते हैं? क्या आपका मतलब है कि इस jsFiddle: jsfiddle.net/aggL3Lk7/2 में , फ़्लोट इनलाइन छवि स्पैन को प्रभावित नहीं कर रही है (इसलिए स्पैन की सीमा इसे कम करती है) लेकिन छवि पाठ को प्रभावित कर रही है (जो लाइन बॉक्स है) जैसा कि दिखाया गया है इस तथ्य से कि पाठ छवि को रेखांकित नहीं कर रहा है?

— सिमिंक

@symlink हाँ, बिल्कुल। ठीक है, आपकी फिडेल में सीमा माता-पिता की है, लेकिन यह मूल रूप से भाई-बहनों के लिए समान होगी: jsfiddle.net/aggL3Lk7/3

— ओरोल

मैं सहमत हूँ। यह स्वीकृत उत्तर होना चाहिए। यह मेरे लिए दिलचस्प है कि डब्ल्यू 3 जिस तरह से हमें "हैक" कोड करने के लिए मजबूर कर रहा है। किसी ने खराब किया।

— DR01D

Answer 3

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

Comments

मैंने कोशिश की कि यह मुझे हल न करे: stackoverflow.com/questions/25329349/…

— SearchForKnowledge

Answer 4

W3 पूर्वस्कूली सिफारिश:

डाल overflow: autoमूल तत्व पर और यह तत्व मार्जिन सहित पूरी पृष्ठभूमि को "रंग" देगा। साथ ही फ्लोटिंग तत्व सीमा के अंदर रहेंगे।

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Answer 5

कुछ भी याद नहीं है। फ्लोट उस मामले के लिए डिज़ाइन किया गया था जहां आप पाठ के कई पैराग्राफ के पास बैठने के लिए एक छवि (उदाहरण के लिए) चाहते हैं, इसलिए पाठ छवि के चारों ओर बहता है। ऐसा नहीं होगा यदि पाठ "कंटेनर" फैला है। आपका पहला पैराग्राफ समाप्त हो जाएगा, और फिर आपका अगला पैराग्राफ छवि के तहत शुरू होगा (संभवतः नीचे कई सौ पिक्सेल)।

और यही कारण है कि आप परिणाम प्राप्त कर रहे हैं।

Comments

माता-पिता की ऊंचाई को ठीक से खींचने वाले फ्लोटेड तत्व के साथ कुछ भी कैसे करना है?

— थोड़ा सा

Answer 6

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

display: inline-block;

के बजाय

float: left;

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

Answer 7

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

.parent {display: flow-root;} 

अधिक स्पष्ट नहीं।

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

Comments

सफारी 11 में भी काम करता है

— लंबित

Answer 8

शुक्रिया एलसर्नी आपने मेरे लिए इसे हल किया।

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

+-----------------------------------------+
| +-------+                     +-------+ |
| | 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>

Answer 9

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

यदि आप यह जानना चाहते हैं कि यह संपत्ति कैसे काम करती है, तो आप फ्लोटप्रूफ पर एक नज़र डालें ।

Answer 10

आप आसानी से पहले के साथ कर सकते हैं आप डिव फ्लेक्स बना सकते हैं और सामग्री को सही या बाएं लागू कर सकते हैं और आपकी समस्या हल हो गई है।

<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
					<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
				</div>