CSS में clear प्रॉपर्टी के साथ फ्लो को कैंसिल करना

इस तरह की समस्या को हल करने के लिए एक विशेष प्रॉपर्टी clear है, जो फ्लो को कैंसिल करती है। वैल्यू left बाएं से फ्लो को कैंसिल करती है, वैल्यू right - दाएं से, और वैल्यू both - दोनों तरफ से। यह वैल्यू सबसे अधिक इस्तेमाल की जाती है।

तो, प्रॉपर्टी clear फ्लो को कैंसिल करती है। हमारे मामले में, यह हमें यह करने की अनुमति देगा कि पहले डिव की फ्लोटिंग इमेज दूसरे डिव पर ओवरलैप न करे।

साथ ही clear उस एलिमेंट को दिया जाना चाहिए, जिस पर फ्लोटिंग एलिमेंट्स ओवरलैप नहीं करने चाहिए, यानी हमारे मामले में इसे दूसरे डिव को दिया जाना चाहिए।

आइए इसे करें - दूसरे डिव को क्लास parent के अलावा क्लास clearfix भी दें और इस नए क्लास के लिए प्रॉपर्टी clear को वैल्यू both में सेट करें - इमेज का ओवरलैप गायब हो जाएगा:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

नाम clearfix आम तौर पर स्वीकृत है, इसलिए भविष्य में इसी का उपयोग करें।