CSS में बिना टेक्स्ट वाले पैरेंट में float प्रॉपर्टी

अब मान लीजिए कि हमारे पास क्लास parent वाला एक डिव है जिसमें टेक्स्ट नहीं है, लेकिन क्लास child वाले दो ब्लॉक चाइल्ड हैं:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

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

Результат:

आइए ब्लॉक चाइल्ड को बाईं ओर फ्लोटिंग बनाएं और देखें क्या होता है:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

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

Результат:

जैसा कि हम देख सकते हैं, ब्लॉक चाइल्ड एक पंक्ति में खड़े हो गए हैं, हालांकि, पैरेंट की ऊंचाई गायब हो गई है और हमारे ब्लॉक नीचे की ओर इससे बाहर निकल आए हैं।

यह व्यवहार हमें पहले से ही ज्ञात है। इस समस्या को हल करने के लिए क्लीयरफिक्स का उपयोग करना चाहिए। आइए इसे करें:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="clearfix"></div>
</div>

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

.clearfix {
  clear: both;
}

Результат: