CSS-Float
CSS Float
- The CSS float property is used to control the positioning of an element within its parent container.
- When you apply the float property to an element, it can be moved to the left or right of its containing element and have other contents flow around it.
Note: web layout is also just the same as print design.
CSS Float property
Property | Description | Values |
---|---|---|
clear | The clear property avoids elements after the floating elements that flow around it. | left, right, both, none, inherit |
float | It specifies whether the box should float or not. | left, right, none, inherit |
CSS Float Property Values
Value | Description |
---|---|
none | It specifies that the element is not floated, and will be displayed just where it occurs in the text, this is a default value. |
left | It is used to float the element to the left. |
right | It is used to float the element to the right. |
initial | It sets the property to its initial value. |
inherit | It is used to inherit this property from its parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.
</p>
<img src="good-morning.jpg" alt="Good Morning Friends" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Output: