## CSS float Property
The CSS `float` property specifies whether an element should float to the left, right, or not at all. This allows text and inline elements to wrap around it.
Historically, `float` was designed for wrapping text around images (similar to print layout), but it became a foundational tool for building entire web page layouts before modern layout systems like Flexbox and Grid were introduced.
---
## Syntax and Usage
The `float` property places an element on the left or right side of its container, allowing text and other inline elements to flow around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (unlike absolutely positioned elements).
> **Note:** Absolutely positioned elements (`position: absolute` or `position: fixed`) completely ignore the `float` property.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `none` |
| **Inherited** | No |
| **CSS Version** | CSS1 |
| **JavaScript Syntax** | `object.style.cssFloat = "left"` |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `float` property.
| Property | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **float** | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
---
## Property Values
| Value | Description |
| :--- | :--- |
| `left` | The element floats to the left of its container. |
| `right` | The element floats to the right of its container. |
| `none` | Default value. The element does not float and will be displayed where it occurs in the normal text flow. |
| `inherit` | Specifies that the value of the `float` property should be inherited from its parent element. |
---
## Code Examples
### 1. Basic Image Floating
This example demonstrates how to float an image to the right, allowing the surrounding text to wrap around its left side.
```css
img {
float: right;
margin-left: 15px; /* Adds space between the image and the wrapping text */
}
```
### 2. Creating a Drop Cap (Floating the First Letter)
You can float the first letter of a paragraph to the left and style it to create a professional editorial "drop cap" effect.
```html
Once upon a time in web development, floats were the primary tool used to build complex multi-column layouts. Today, they are still highly effective for their original purpose: wrapping text beautifully around media elements and creating stylized drop caps.
```
### 3. Creating a Horizontal Navigation Menu
By floating list items (`
`) to the left, you can easily turn a standard vertical bulleted list into a clean, horizontal navigation bar.
```html
```
### 4. Creating a Tableless Page Layout
Before CSS Grid and Flexbox, floats were widely used to create multi-column web layouts with headers, footers, sidebars, and main content areas.
```html
Website Header
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
```
---
## Important Considerations
### The "Float Collapse" and Clearing Floats
When you float child elements inside a parent container, the parent container often collapses because floated elements are taken out of the normal document flow. To fix this, you must "clear" the floats.
#### The Clearfix Hack
The most modern and cleanest way to solve this is using the CSS clearfix hack on the parent element:
```css
.container::after {
content: "";
display: table;
clear: both;
}
```
Alternatively, you can add `overflow: auto` or `overflow: hidden` to the parent container, provided you do not have positioned elements spilling outside of it.
### Modern Alternatives
While `float` is still the correct tool for wrapping text around images, modern CSS layouts (like multi-column grids and sidebars) should be built using **CSS Flexible Box Layout (Flexbox)** or **CSS Grid Layout**, which offer more robust alignment and spacing controls without requiring float clears.
YouTip