CSS Float

एक physical newspaper publish करने की कल्पना करें। जब आप किसी article में एक illustration डालते हैं, तो आप नहीं चाहते कि paragraph text उसके नीचे खाली lines पर अलग रह जाए। आप चाहते हैं कि text flow करे और picture के left या right side के चारों ओर साफ़ तरीके से wrap हो। CSS float वही newspaper layout rule है। यह आपको किसी element को left या right margin पर धकेलने देता है, आस-पास के inline text को उसके चारों ओर naturally wrap होने का instruction देते हुए।

In this page:

Floating Concept
Collapsed Parent Problem
clear से Floats को Clear करना
Modern clearfix Hack
Floats बनाम Modern Layout Grids

Syntax

css

selector {
  float: left | right | none;
}

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

Floating Concept

float property किसी element को उसके container के left या right पर धकेलती है, आस-पास के inline text और inline elements को उसके चारों ओर wrap होने देते हुए। यह property originally news articles में images के चारों ओर text wrapping format करने के लिए design की गई थी।

Note:

media illustrations के चारों ओर text को साफ़ तरीके से wrap करने के लिए float: left या float: right इस्तेमाल करें।
Accepted values:
left — element को left पर float करता है
right — element को right पर float करता है
none — कोई float नहीं (default)
inline-start | inline-end — direction-aware floats
clear — left | right | both | none floats के चारों ओर wrapping रोकता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: Floated elements को normal page flow से हटा दिया जाता है, जो अगर clear न किया जाए तो parent containers को collapse करा सकता है।

उदाहरण: The Floating Concept

css

<style>
img {
  float: left;
  margin-right: 10px;
}
</style>
<div>
  <img src="https://placehold.co/100x100" alt="Floated image">
  <p>Text wraps around the floated image</p>
</div>

Collapsed Parent Problem

क्योंकि floated elements को normal page flow से हटा दिया जाता है, parent containers उनकी height calculate नहीं करते, 0 पर collapse हो जाते हैं और बाद के elements floated items के नीचे चले जाते हैं।

Note: बिना कोई extra code markup जोड़े floated children को जल्दी clear करने के लिए parent containers पर overflow property इस्तेमाल करें।

Warning: floated children को contain करने में fail होने से parent elements पर borders और backgrounds पूरी तरह collapse हो जाएँगे।

उदाहरण: The Collapsed Parent Problem

css

<style>
.parent {
  border: 2px solid red;
}
.child {
  float: left;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="parent">
  <div class="child">Floated child collapses the parent's height</div>
</div>

clear से Floats को Clear करना

clear property elements को पहले वाले floated elements के चारों ओर wrap होने से रोकता है। clear: left, clear: right, या clear: both लागू करके, आप browser को instruct करते हैं कि element को किसी भी floated items के नीचे धकेल दे।

Note:

बाद के headers या footers को floated columns के चारों ओर wrap होने से रोकने के लिए उन पर clear: both इस्तेमाल करें।
Accepted values:
none — floats के बगल में बैठ सकता है (initial value)
left — किसी भी left floats के नीचे
right — किसी भी right floats के नीचे
both — दोनों तरफ़ के floats के नीचे
inline-start | inline-end — direction-aware versions
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: बिना clear किए गए statically positioned elements आपके page पर floated blocks के साथ overlap हो सकते हैं।

उदाहरण: Clearing Floats with clear

css

<style>
.box {
  float: left;
  background: lightblue;
  padding: 8px;
}
.footer {
  clear: both;
  background: lightgray;
  padding: 8px;
}
</style>
<div class="box">Floated box</div>
<div class="footer">Pushed below the floated box</div>

Modern clearfix Hack

clearfix hack floated elements को clear करने के लिए इस्तेमाल होने वाला एक standard CSS design pattern है। parent container पर एक pseudo-element (:after) लगाकर, आप इसे अपने HTML में extra, खाली div tags जोड़े बिना floats को automatically clear करने का instruction दे सकते हैं।

Note: किसी भी floated containers को आसानी से clear करने के लिए अपनी stylesheet में clearfix नाम की एक utility class define करें।

Warning: सुनिश्चित करें कि अगर आपकी site legacy systems को support करती है तो आपकी clearfix styles पुराने browsers द्वारा supported हों।

उदाहरण: The Modern clearfix Hack

css

<style>
.clearfix {
  border: 2px dashed #999;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.child {
  float: left;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="clearfix">
  <div class="child">Floated</div>
</div>

Floats बनाम Modern Layout Grids

Flexbox और Grid introduce होने से पहले, developers को multi-column website layouts बनाने के लिए float: left इस्तेमाल करना पड़ता था। जबकि floats अभी भी text-wrapping designs के लिए बेहद उपयोगी हैं, modern layouts को column grids के लिए Flexbox या Grid इस्तेमाल करना चाहिए।

Note: layout columns के लिए modern Flexbox या Grid इस्तेमाल करें, और floats को सख़्ती से text-wrapping designs के लिए बचाएँ।

Warning: complex, responsive grids बनाने के लिए floats इस्तेमाल करना tedious है और layout-breaking errors के लिए prone है।

उदाहरण: Floats vs. Modern Layout Grids

css

<style>
.old-way {
  float: left;
  width: 50%;
  background: lightblue;
  padding: 8px;
  box-sizing: border-box;
}
.modern-way {
  display: flex;
}
.modern-way div {
  background: lightgreen;
  padding: 8px;
}
</style>
<div class="old-way">Legacy float column</div>
<div class="modern-way">
  <div>Flexbox column</div>
</div>

Live Example

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Overflow Next Lesson → CSS Inline-block