77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
---
|
|
title: Float and Clear
|
|
---
|
|
## Float and Clear
|
|
|
|
The CSS `float` property specifies how an element should float.
|
|
|
|
The CSS `clear` property specifies what elements can float beside the cleared element and on which side.
|
|
|
|
### The `float` Property
|
|
The `float` property is used for positioning and layout on web pages.
|
|
|
|
The `float` property can have one of the following values:
|
|
|
|
`left` - The element floats to the left of its container
|
|
`right`- The element floats to the right of its container
|
|
`none` - The element does not float (will be displayed just where it occurs in the text). This is default
|
|
`inherit` - The element inherits the float value of its parent
|
|
In its simplest use, the `float` property can be used to wrap text around images.
|
|
|
|
#### Float in Picture:
|
|
![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "css-tricks-float-img")
|
|
|
|
```
|
|
img {
|
|
float: right;
|
|
}
|
|
```
|
|
This example specifies that an image should float to the right in a page:
|
|
|
|
![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "float img web")
|
|
```
|
|
img {
|
|
float: left;
|
|
}
|
|
```
|
|
This example specifies that an image should float to the left in a page:
|
|
|
|
```
|
|
img {
|
|
float: none;
|
|
}
|
|
```
|
|
|
|
In the following example the image will be displayed just where it occurs in the text (`float: none;`):
|
|
|
|
|
|
### The `clear` Property
|
|
The `clear` property specifies what elements can float beside the cleared element and on which side.
|
|
|
|
The `clear` property can have one of the following values:
|
|
|
|
`none` - Allows floating elements on both sides. This is default
|
|
`left` - No floating elements allowed on the left side
|
|
`right`- No floating elements allowed on the right side
|
|
`both` - No floating elements allowed on either the left or the right side
|
|
`inherit` - The element inherits the clear value of its parent
|
|
The most common way to use the `clear` property is after you have used a `float` property on an element.
|
|
|
|
When clearing floats, you should match the `clear` to the `float`. If an element is floated to the `left`, then you should `clear` to the `left`. Your floated element will continue to `float`, but the cleared element will appear below it on the web page.
|
|
|
|
#### Example:
|
|
![unclear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/unclearedfooter.png "unclear footer image")
|
|
Source: CSS-TRICS
|
|
```
|
|
div {
|
|
clear: left;
|
|
}
|
|
```
|
|
![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "clear footer image")
|
|
Source: CSS-TRICS
|
|
|
|
### Additional Resources:
|
|
- MDN CSS: [Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) & [Clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
|
|
- [W3Schools tutorials](https://www.w3schools.com/css/css_float.asp)
|
|
- CSS-Tricks: [float](https://css-tricks.com/all-about-floats/) & [clear](https://css-tricks.com/almanac/properties/c/clear/)
|