-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
float
in CSS?The float
property in CSS is used to position elements to the left or right of their container, allowing text or inline elements to wrap around them.
Originally designed for images, float
is also used to create layouts (though now replaced by Flexbox/Grid).
element {
float: left | right | none | inherit;
}
Values:
Value | Description |
---|---|
left |
Element floats to the left |
right |
Element floats to the right |
none |
Default. Element does not float |
inherit |
Inherits the float value from its parent |
<img src="image.jpg" class="float-left" alt="sample image">
<p>This text wraps around the floated image.</p>
.float-left {
float: left;
margin-right: 10px;
}
🟢 The image floats to the left, and the text wraps around it.
<img src="image.jpg" class="float-right">
<p>This text wraps around the image on the left side.</p>
.float-right {
float: right;
margin-left: 10px;
}
🟢 The image floats to the right, and the text flows on the left.
Floated elements are removed from normal flow, so parent elements often collapse in height.
Use clear
or clearfix to fix layout issues.
clear
.clearfix::after {
content: "";
display: table;
clear: both;
}
Apply this class to the parent container of floated items.
Feature | Float | Flexbox |
---|---|---|
Layout use | Old, basic layouts | Modern, responsive layouts |
Wrapping | Yes | Yes |
Alignment | Difficult | Easy (center, space-between) |
Direction | Horizontal only | Both directions |
✅ Use Flexbox/Grid for modern layouts.
Use float
mainly for text wrapping or simple layouts.
Wrapping text around images
Creating sidebars
Floating buttons to right/left
Basic grid-like structures
Q1. Float an image to the left with 15px right margin.
Q2. Float an ad banner to the right in a webpage.
Q3. Float two <div>
s side by side using float: left
.
Q4. Add a clearfix to fix a container with floated children.
Q5. Float a button to the right in a header.
Q6. Stop the float effect from affecting the next paragraph.
Q7. Make an image float left and text wrap around.
Q8. Float a box to the right and apply background color.
Q9. Create a container with two floated columns.
Q10. Use clear: both;
to start a new section under floated elements.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)