कैसे करें - फ़्लोट्स साफ़ करें (Clearfix)
जानें कि "clearfix" हैक के साथ फ़्लोट कैसे साफ़ करें।
फ्लोट्स को कैसे साफ़ करें (Clearfix)
एक तैरते हुए तत्व के बाद के तत्व इसके चारों ओर प्रवाहित होंगे। समस्या को ठीक करने के लिए "clearfix" हैक का उपयोग करें:
क्लियरफिक्स के बिना
क्लियरफिक्स के साथ
क्लियरफिक्स हैक
यदि कोई तत्व उसमें निहित तत्व से लंबा है, और यह तैरता है, तो यह अपने कंटेनर के बाहर बह जाएगा।
तब हम overflow: auto;इस समस्या को ठीक करने के लिए युक्त तत्व में जोड़ सकते हैं:
उदाहरण
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.