CSS में ब्लॉक्स के लिए float गुण

float गुण केवल चित्रों पर ही नहीं, बल्कि किसी भी अन्य ब्लॉक पर लागू होता है।

आइए इसे सत्यापित करें।

मान लीजिए कि हमारे पास parent क्लास वाला एक मूल ब्लॉक है, और उसके अंदर टेक्स्ट और child क्लास वाला एक चाइल्ड ब्लॉक है। दोनों ब्लॉक्स को बॉर्डर दिया गया है, और चाइल्ड को चौड़ाई और ऊंचाई भी दी गई है:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

आइए अब चाइल्ड को float left सेट करें - टेक्स्ट हमारे ब्लॉक के चारों ओर लपेटना शुरू कर देगा:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: