ब्लॉक प्रारूपण संदर्भ
फ्लोट्स, बिल्कुल तैनात तत्व, ब्लॉक कंटेनर (जैसे इनलाइन-ब्लॉक, टेबल-सेल, और टेबल-कैप्शन) जो ब्लॉक बॉक्स नहीं हैं, और 'दिखाई' के अलावा 'अतिप्रवाह' वाले ब्लॉक बॉक्स को छोड़कर (उस मूल्य को प्रचारित किए जाने के अलावा) व्यूपोर्ट के लिए) अपनी सामग्री के लिए नए ब्लॉक फॉर्मेटिंग संदर्भों को स्थापित करें ।
मेरी बोल्ड के साथ, यह है की स्थापना सा है कि महत्वपूर्ण है
इसका मतलब यह है कि आप जिस तत्व का उपयोग करते हैं overflow(दृश्य के अलावा कुछ भी) floatया inline-block..etc उसके बाल तत्वों के लेआउट के लिए जिम्मेदार हो जाता है। यह बाल तत्व हैं जो तब "समाहित" होते हैं, चाहे वह तैरता हो या हाशिए का ढहना हो, जिसे वे अपने बाउंडिंग माता-पिता द्वारा पूरी तरह से निहित होना चाहिए।
ब्लॉक फॉर्मेटिंग संदर्भ में, प्रत्येक बॉक्स का बायाँ बाहरी किनारा युक्त ब्लॉक के बाएँ किनारे को स्पर्श करता है (दाएं-से-बाएँ स्वरूपण के लिए, दाएं किनारों को स्पर्श करता है)
उपरोक्त पंक्ति का क्या अर्थ है:
क्योंकि एक बॉक्स केवल आयताकार हो सकता है और अनियमित आकार का नहीं है इसका मतलब है कि दो फ्लोट्स (या एक के बगल में) के बीच एक नया ब्लॉकिंग फॉर्मेटिंग संदर्भ पड़ोसी साइड फ्लोट के आसपास नहीं लपेटेगा। अपने माता-पिता के बाएं (या आरटीएल में) दाएं छोर को छूने के लिए आंतरिक, बाल बक्से केवल उतना ही आगे बढ़ सकते हैं। यह यह व्यवहार है जो स्तंभ शैली लेआउट के लिए उपयोगी है। हालांकि इसका मुख्य उपयोग फ्लोट्स को रोकना है, "मुख्य सामग्री" डिव में कहें, वास्तव में फ्लोटिंग साइड कॉलम, यानी फ्लोट्स जो स्रोत कोड में पहले दिखाई देते हैं।
फ्लोट क्लीयरेंस
सामान्य परिस्थितियों में फ़्लोट्स को पिछले सभी फ़्लोट किए गए तत्वों को साफ़ करने के लिए माना जाता है, जो कि पहले पूरे स्रोत कोड में फ़्लोट किया गया है, न कि केवल आपके प्रदर्शित "कॉलम" में "फ्लोट क्लीयरेंस स्पेक्स" से बोली का अर्थ है
यह गुण इंगित करता है कि तत्व के बॉक्स के कौन से हिस्से (तों) पहले चल रहे बॉक्स से सटे नहीं हो सकते हैं। 'स्पष्ट' संपत्ति तत्व के अंदर या अन्य ब्लॉक प्रारूपण संदर्भों में तैरने पर विचार नहीं करती है
तो मान लें कि आपके पास एक तीन कॉलम लेआउट है जहाँ बाएँ और दाएँ कॉलम क्रमशः बाएँ और दाएँ फ़्लोट किए जाते हैं, साइड कॉलम अब नए ब्लॉक फ़ॉर्मेटिंग कॉन्टेक्ट्स में हैं, क्योंकि वे फ़्लोट किए गए हैं (याद रखें कि फ्लोट भी उन गुणों में से एक है जो एक नया बीएफसी स्थापित करते हैं। ), इसलिए आप खुशी से उनके अंदर सूची तत्वों को तैर सकते हैं और वे केवल स्पष्ट तैरते हैं जो पहले से ही साइड कॉलम के अंदर हैं, जो अब स्रोत कोड में पहले तैरने के बारे में परवाह नहीं करते हैं
मुख्य सामग्री को एक नया ब्लॉक स्वरूपण संदर्भ बनाने के लिए या नहीं?
अब वह मध्य स्तंभ, आप बस इसे दोनों तरफ से मार्जिन कर सकते हैं, ताकि यह दो तरफ तैरते हुए स्तंभों के बीच बड़े करीने से बैठे और शेष चौड़ाई को ले जाए, वांछित चौड़ाई प्राप्त करने का एक सामान्य तरीका है यदि केंद्र स्तंभ "द्रव" है - जो होगा तब तक ठीक रहें जब तक आपको अपनी सामग्री div के अंदर फ़्लोट्स / निकासी का उपयोग करने की आवश्यकता न हो (उनके लिए "क्लीयरफ़िक्स" हैक्स या टेम्पलेट का उपयोग करने वालों के लिए एक सामान्य घटना)
इसे बहुत ही सरल कोड लें:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated">this a floated box</div>
</div>
यह निम्नलिखित उत्पादन करता है:
सामान्य तौर पर यह ठीक है, खासकर यदि आप कोई पृष्ठभूमि रंग या आंतरिक (मुख्य सामग्री में) तैरता - नोटिस तैरता ठीक (अभी तक साफ नहीं) वे करने के लिए उन्हें छोड़कर क्या आप शायद कर रहे हैं लेकिन वे, H3के शीर्ष मार्जिन और pनीचे का मार्जिन वास्तव में सामग्री div (lightgrey पृष्ठभूमि) द्वारा निहित नहीं है।
उपरोक्त कोड जोड़ने के समान सरल मार्जिन वाले परिदृश्य के लिए:
.clear-r {clear: right;}
CSS के लिए, और दूसरा HTML फ्लोट किए गए बॉक्स को इसमें बदलें:
<div class="floated clear-r"> this a floated cleared box</div>
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
इस बार आपको यह मिलेगा:
दूसरा फ्लोट दाहिने हिस्से को साफ कर रहा है लेकिन यह दाहिने कॉलम की पूरी ऊंचाई को साफ कर रहा है। सही कॉलम स्रोत कोड में पहले फ्लोट किया गया है, इसलिए इसे बताए अनुसार साफ़ कर रहा है! शायद वांछित प्रभाव नहीं है, हालांकि, यह भी ध्यान दें h3और pमार्जिन अभी भी ढह गए हैं (निहित नहीं हैं)।
बच्चों की खातिर इसे एक ब्लॉक फॉर्मेटिंग संदर्भ स्थापित करें!
और अंत में मुख्य सामग्री कॉलम को ज़िम्मेदारी दें - अपनी सामग्री के लिए - एक ब्लॉक स्वरूपण संदर्भ बनें - margin: 0 200px;मुख्य सामग्री CSS और ADD से निकालें overflow: hidden;और आप इसे प्राप्त करें:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
overflow: hidden;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
यह संभवतः बहुत अधिक है जैसे आप क्या होने की उम्मीद करेंगे, ध्यान दें कि अब फ़्लैट्स निहित हैं, वे सही साइड कॉलम को अनदेखा करना ठीक से स्पष्ट करते हैं, h3और pहाशिये के बजाय मार्जिन भी निहित हैं।
इन दिनों रीसेट के व्यापक उपयोग के साथ मार्जिन कम ध्यान देने योग्य है (और IE अभी भी उन्हें काफी सही नहीं मिला है) लेकिन केंद्र के "मुख्य सामग्री" के साथ जो हुआ वह यह है कि यह ब्लॉक प्रारूपण संदर्भ बन गया है और अब इसके लिए जिम्मेदार है स्वयं का बच्चा (वंशज) तत्व। यह वास्तव में बहुत hasLayout के माइक्रोसॉफ्ट के शुरुआती दिनों धारणा के समान है, यह एक ही गुण का उपयोग करता है display: inline-block, floatऔर overflowकुछ भी दिखाई अलावा अन्य, और निश्चित रूप से तालिका सेल हमेशा लेआउट .. यह कीड़े के बिना तथापि है;)
आशा है कि थोड़ा मदद करता है, किसी भी सवाल पूछने के लिए स्वतंत्र महसूस हो रहा है!
अद्यतन: प्रश्न में अधिक जानकारी फिर से:
जब आप कहते हैं, "लेकिन जब उपयोगकर्ता एजेंट बॉक्स को खींचते हैं और जब वे सामग्री भरते हैं तो उन्हें ध्यान में रखते हुए अस्थायी तत्वों को अनदेखा कर दिया जाता है।"
हाँ, अपने कंटेनर बक्से को आम तौर पर उखाड़ फेंकते हैं, यह है कि माता-पिता की सीमाओं के बारे में आपका क्या मतलब है? जब एक ब्लॉक एलिमेंट खींचा जाता है और उसमें एक फ्लोट होता है तो ब्लॉक पेरेंट स्वयं फ्लोट के नीचे एक आयत के रूप में खींचा जाता है और यह अन्य चाइल्ड एलिमेंट्स के "इनलाइन अनाम बॉक्स" या बस "लाइन बॉक्स" के लिए छोटा होता है, जिसके लिए जगह बनाने के लिए छोटा किया जाता है। नाव
यह कोड लें:
#content {
background: #eee;
color #000;
border: 3px solid #444;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
p {
background: #444;
color: #fff;
}
<div id="content">
<div class="float">floated box</div>
<h3>This is a content box</h3>
<p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>
जो इस का उत्पादन करता है:
आप देखते हैं कि मूल तत्व में वास्तव में फ्लोट नहीं होता है, क्योंकि यह इसे पूरी तरह से लपेटता नहीं है .. फ्लोट बस तैर रहा है सामग्री के ऊपर है - यदि आप div में सामग्री जोड़ना जारी रखना चाहते थे तो यह अंततः लपेट जाएगा। फ़्लोट के नीचे क्योंकि pतत्व की (अनाम) "लाइन बक्से" के लिए कोई ज़रूरत नहीं होगी खुद को किसी भी अधिक छोटा करने के लिए।
मैंने पैराग्राफ तत्व को रंगीन किया है ताकि आप देख सकें कि यह वास्तव में फ्लोट के नीचे चला जाता है, डार्कग्रै बैकग्राउंड वह है जहाँ पैराग्राफ़ शुरू होता है, सफ़ेद पाठ वह जगह है जहाँ "अनाम लाइन बॉक्स" शुरू होता है - यह केवल उन्हें वास्तव में है जो "कमरे बनाते हैं" "फ्लोट के लिए, जब तक कि आप इसे अन्यथा नहीं बताते (यानी आप संदर्भ बदलते हैं)
उपरोक्त चित्र का संदर्भ देते हुए, यदि आप pतत्व के बाईं ओर हाशिये पर हैं, तो यह फ्लोट के नीचे से पाठ को लपेटना बंद कर देगा क्योंकि "लाइन बॉक्स" (सफेद पाठ) केवल बाएं किनारे को स्पर्श करेगा उनके कंटेनर, और आप pफ्लोट के स्पष्ट, दाईं ओर रंगीन पृष्ठभूमि लाएंगे , लेकिन आपने pस्वरूपण संदर्भ के व्यवहार को नहीं बदला होगा । ऊपर के पहले चित्र में केंद्र स्तंभ की तरह;)