CSS Units and Floats
1. CSS Units
CSS units are used to specify the size of various properties. Understanding different units is crucial for responsive design.
Absolute Units
Pixels (px)
Fixed size unit - 1px = 1/96th of an inch
.box { width: 100px; height: 50px; }
Relative Units
Em (em)
Relative to the font-size of the element (or parent element)
.box { width: 5em; height: 2.5em; }
Rem (rem)
Relative to the font-size of the root element (html)
.box { width: 5rem; height: 2.5rem; }
Percentage (%)
Relative to the parent element's size
.box { width: 20%; height: 60px; }
Viewport Units
Viewport Width (vw)
1vw = 1% of viewport width
.box { width: 20vw; height: 10vw; }
Viewport Height (vh)
1vh = 1% of viewport height
.box { width: 200px; height: 10vh; }
Responsive Box (80vw × 40vh)
Units Comparison Table
| Unit |
Type |
Relative To |
Best For |
| px |
Absolute |
Screen pixels |
Borders, small elements |
| em |
Relative |
Element's font-size |
Typography, spacing |
| rem |
Relative |
Root font-size |
Typography, consistent sizing |
| % |
Relative |
Parent element |
Layout, responsive design |
| vw/vh |
Relative |
Viewport size |
Full-screen layouts |
2. CSS Float Property
The float property is used to position elements horizontally and allow other elements to wrap around them.
Float Values
Float: Left
.box { float: left; }
Float Left
This text wraps around the floated element. The floated element is positioned to the left, and the text flows around it naturally. This is useful for creating layouts with images or sidebars.
Float: Right
.box { float: right; }
Float Right
This text wraps around the floated element. The floated element is positioned to the right, and the text flows around it naturally. Notice how the text flows around the right side of the floated element.
Float: None (Default)
.box { float: none; }
No Float
This element is not floated, so it behaves as a normal block element. The text appears below it rather than wrapping around it.
Clearfix Technique
Important: When using floats, parent containers may collapse because floated elements are removed from the normal document flow. Use the clearfix technique to prevent this.
.clearfix::after {
content: "";
display: table;
clear: both;
}
Multiple Floated Elements
.box1 { float: left; }
.box2 { float: left; }
.box3 { float: right; }
Box 1
Box 2
Box 3
Multiple elements can be floated. Left-floated elements stack horizontally from left to right, while right-floated elements stack from right to left.
3. Practical Layout Example
Combining CSS units and floats to create a responsive layout:
.sidebar {
float: left;
width: 25%;
padding: 1rem;
}
.main-content {
float: right;
width: 73%;
padding: 1rem;
}
.footer {
clear: both;
padding: 1rem;
}
4. Best Practices
CSS Units Best Practices
- Use rem for typography: Provides consistent scaling across devices
- Use em for component-specific sizing: Scales relative to component's font-size
- Use % for layout: Creates flexible, responsive layouts
- Use vw/vh for full-screen elements: Perfect for hero sections and overlays
- Use px sparingly: Only for borders, shadows, and small decorative elements
Float Best Practices
- Always use clearfix: Prevents parent container collapse
- Consider modern alternatives: Flexbox and Grid are often better choices
- Be mindful of stacking: Floated elements stack horizontally
- Use clear property: Prevents elements from wrapping around floats
Warning: While floats are still useful for text wrapping around images, consider using Flexbox or CSS Grid for modern layout needs. They provide more predictable and flexible layout options.
5. Modern Alternatives to Float
While floats are still useful, modern CSS provides better layout solutions:
Float-based Layout
.container {
overflow: hidden; /* Clearfix */
}
.item {
float: left;
width: 30%;
margin: 1%;
}
CSS Grid
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
Recommendation: Use floats for text wrapping around images and creating layouts. For more complex layouts, consider CSS Grid or table-based layouts.