CSS फ़्लोट

Flexbox और grid के आने से पहले, float से ही पूरे पेज के layouts बनाए जाते थे। आज उसका काम छोटा है, पर एक काम के लिए वह अब भी सही tool है: text को तस्वीर के चारों ओर लपेटना, जैसे अखबार में होता है। बाईं ओर तस्वीर, article का text उसके दाईं ओर बहता हुआ।

Diagram — देखें, यह सब कैसे जुड़ता है

जब आप किसी element को float करते हैं, तो वह अपने container के एक तरफ चला जाता है और उसके बाद वाला content उसके चारों ओर बहता है। Element सामान्य बहाव से बाहर हो जाता है — और इससे एक मशहूर समस्या पैदा होती है, जिसे यह पाठ ठीक भी करता है।

Float left और float right

float: left element को उसके container के बाईं ओर धकेल देता है, और text उसकी दाईं ओर लिपट जाता है। float: right इसका उल्टा करता है। क्लासिक उदाहरण article में तस्वीर है: उसे बाईं ओर float करें, और paragraph text उसके बगल में सुथरा बैठ जाता है।

.photo {
  float: left;
  width: 140px;
  margin: 0 16px 8px 0;
}

Clear — floats के नीचे धकेलें

Float किया हुआ element अगले content को अपने बगल में ऊपर खींचता रहता है। जब आप चाहते हैं कि कोई चीज़ लिपटना बंद करके वापस पूरी लाइन पर आ जाए — उदाहरण के लिए footer — तो उसे clear: both देते हैं। वह हर floated element के नीचे चला जाता है, बाईं और दाईं दोनों, और नई लाइन से शुरू होता है।

.footer {
  clear: both;
}

सिकुड़ता हुआ parent

यहाँ मशहूर समस्या है। जिस parent बॉक्स में सिर्फ floated बच्चे होते हैं, वह शून्य height तक सिकुड़ जाता है — वह ऐसे व्यवहार करता है जैसे बच्चे हैं ही नहीं, क्योंकि floated elements सामान्य बहाव से बाहर होते हैं। Parent का background और border कुछ नहीं रह जाते, और अगला section floats के नीचे ऊपर खिसक आता है।

Clearfix — मानक हल

मानक हल clearfix कहलाता है। आप floats के बाद ::after pseudo-element से एक छोटा अदृश्य element जोड़ते हैं, और उसे clear करते हैं। Parent फिर अपने floated बच्चों को लपेटने के लिए फैल जाता है। यह तीन लाइन का CSS है, और आप इसे हर float layout पर इस्तेमाल करेंगे।

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

Float layout — दो कॉलम

Float और clear से आप साधारण दो-कॉलम layout बना सकते हैं: एक column बाईं ओर float करता है, दूसरा दाईं ओर, और footer दोनों को clear करता है। यह वेब की सबसे पुरानी layout तरकीब है, और अब भी काम करती है। नए layouts के लिए flexbox और grid आसान हैं — आप उनसे इस कोर्स में बाद में मिलेंगे — पर तस्वीरों के चारों ओर text लपेटने के लिए float ही tool है।

आम गलतियाँ

• Floats को clear करना भूल जाना, इसलिए footer या अगला section उनके बगल में ऊपर खिसक आता है।
• Parent को शून्य height तक सिकुड़ने देना और हैरान होना कि उसका background colour कहाँ गया।
• असली layouts के लिए flexbox या grid की जगह पेज के हर element को float करना।
• Float की हुई तस्वीर और उसके चारों ओर लिपटते text के बीच margin भूल जाना।
• clear: left तब इस्तेमाल करना जब दाईं ओर float किए हुए elements भी हों — सुरक्षित रहने के लिए clear: both इस्तेमाल करें।

याद रखें

• float: left और float: right element को एक तरफ ले जाते हैं; text दूसरी तरफ लिपट जाता है।
• clear: both element को सभी floated elements के नीचे धकेल देता है।
• जिस parent में सिर्फ floated बच्चे हों वह शून्य height तक सिकुड़ जाता है — इसे clearfix से ठीक करें।
• Clearfix है ::after जिसमें content: "", display: table और clear: both होते हैं।
• Float तस्वीरों के चारों ओर text लपेटने के लिए सबसे अच्छा है; पेज layouts के लिए flexbox या grid इस्तेमाल करें।
• तरकीब: Float बाईं या दाईं, clear दोनों — clearfix माता-पिता को बचाए।

उदाहरण समझिए

• .photo { float: left; width: 140px; margin: 0 16px 8px 0; } — नारंगी CHAI बॉक्स बाईं ओर तैरता है, और स्वागत वाला text उसके दाईं ओर 16px के gap के साथ लिपट जाता है।
• .clearfix::after { content: ""; display: table; clear: both; } — clearfix wrapper को अपने floated बच्चों के चारों ओर फैलने देता है, बजाय इसके कि वह सिकुड़ जाए।
• .menu { float: left; width: 45%; } — menu column पेज के बाईं ओर तैरता है।
• .offers { float: right; width: 45%; } — offers column दाईं ओर तैरता है, इसलिए दोनों columns साथ-साथ बैठते हैं।
• .menu, .offers { box-sizing: border-box; } — padding 45% चौड़ाई के अंदर गिना जाता है, इसलिए दोनों columns सच में एक लाइन पर फिट होते हैं।
• .footer { clear: both; } — footer दोनों floated columns के नीचे चला जाता है और नई पूरी चौड़ाई वाली लाइन से शुरू होता है।