हम CSS clear प्रॉपर्टी का उपयोग करके फ्लोटेड एलिमेंट के उस साइड को स्पेसिफाई कर सकते हैं जिसे फ्लोइंग कंटेंट से क्लियर किया जाना है।
उदाहरण
आइए CSS clear प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear { clear: left; } .yellow{ background-color: #FF8A00; } .red{ background-color: #F44336; } .green{ background-color: #4CAF50; } p { float: left; margin: 10px; padding: 10px; color:white; } </style></head> <body> <p class="red">Important Notice</p> <p class="clear red">Important Notice</p> <p class="yellow">Mediocre Notice</p> <p class="green">Ignorable Notice</p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
उदाहरण
आइए CSS clear प्रॉपर्टी का एक और उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> p { float: left; margin: 10px; padding: 10px; color:white; background-color: #48C9B0; border: 4px solid #145A32; } p.noneFloat{ float: none; clear: both; color: #34495E; } </style></head> <body> <p>I am okay with shared space</p> <p class="noneFloat">I want a private space</p> <p>I am also okay with shared space</p> <p>Me too</p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
