CSS float प्रॉपर्टी से एलिमेंट्स को अलाइन करें

float प्रॉपर्टी का उपयोग

float प्रॉपर्टी का उपयोग किसी एलिमेंट को उसके कंटेनर के बाएं या दाएं किनारे पर फ्लोट (तैरने) के लिए किया जाता है, जिससे टेक्स्ट और इंलाइन एलिमेंट्स उसके चारों ओर रैप हो सकें। यह पुराना लेआउट तरीका है; आधुनिक लेआउट के लिए फ्लेक्सबॉक्स/ग्रिड बेहतर हैं।

उदाहरण: दाएं फ्लोट

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {
        float: right;
        width: 200px;
        border: 1px dashed blue;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <div class="demo">
      <p>This is demo text and right aligned.</p>
    </div>
  </body>
</html>

महत्वपूर्ण: फ्लोटेड एलिमेंट्स के बाद clear: both (या overflow: auto पैरेंट पर) का उपयोग करके बाद के एलिमेंट्स को फ्लोट से मुक्त करें।