# Float और Z-Index — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-float-zindex

> float की पुरानी लेआउट भूमिका, और z-index से स्टैक क्रम नियंत्रित करना।

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

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

## Float और clearfix

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

```css
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` को उसके एकमात्र बचे प्राकृतिक काम के लिए रखें: इमेज के चारों ओर टेक्स्ट लपेटना।