Float in css ek property hai jo define karti hai ki element apne container ke andar left ya right side me kaise float karega.
Iska main use:
- Elements ko side me place karna
- Text ko images ke around wrap karna
Float in CSS Values
Float in css ke main values:
- left → element left side float karega
- right → element right side float karega
- none → default, float nahi karega
- inherit → parent ka value follow karega
CSS float: right
Element container ke right side me chala jata hai, aur text uske around wrap hota hai.
Example
CSS float: left
Element left side me float hota hai, aur text uske right side wrap hota hai.
Example
CSS float: none
Default value hoti hai.
- Element normal flow me rehta hai
- Koi floating nahi hoti
Example
Float Elements Next to Each Other
Normally <div> block element hota hai (new line leta hai).
Lekin float in css use karke hum unhe side-by-side la sakte hain.
Example
CSS clear Property
clear property batati hai ki floating elements ke next element ka kya behavior hoga.
Values:
- none → default
- left → left floated elements ke neeche push karega
- right → right floated ke neeche
- both → dono side floats ke neeche
- inherit → parent se value lega
Example
CSS Clearfix Hack
Problem: Agar floated element container se bada ho jaye, to wo container ke bahar nikal jata hai.
Solution: clearfix hack use karte hain.
Example
Explanation
::after→ element ke baad pseudo-element create karta haicontent: ""→ invisible content create karta haiclear: both→ left + right floats clear karta haidisplay: table→ proper layout maintain karta hai
Float in CSS ka use layout aur text wrapping ke liye hota hai, lekin proper control ke liye clear aur clearfix ka use karna important hota hai.
