Float और Z-Index

float: पुराना लेआउट

float सीएसएस का मूल लेआउट टूल था, इमेज के चारों ओर टेक्स्ट लपेटने और कॉलम बनाने के लिए। आधुनिक लेआउट अब Flexbox और Grid उपयोग करता है — पर टेक्स्ट को इमेज के चारों ओर लपेटने के लिए float अब भी दिखता है।

Float और clearfix

फ्लोटेड एलिमेंट अपने पेरेंट की ऊँचाई सिकोड़ सकता है — clearfix हैक इसे ठीक करता है।

img.thumb {
  float: left;
  margin-right: 12px;
}

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

z-index और स्टैकिंग

जब बॉक्स आपस में ओवरलैप करते हैं, z-index तय करता है कि कौन-सा ऊपर रहेगा — पर यह सिर्फ उन एलिमेंट पर काम करता है जिनका position static नहीं है। ज़्यादा संख्या कम वाली के ऊपर रहती है।

पहले Flexbox/Grid आज़माएँ

पेज लेआउट और कंपोनेंट अलाइनमेंट के लिए Flexbox या Grid उपयोग करें — float को उसके एकमात्र बचे प्राकृतिक काम के लिए रखें: इमेज के चारों ओर टेक्स्ट लपेटना।