Float
An element’s floating behavior is defined via the CSS float attribute.
What elements can float next to the cleared element and on which side are determined by the CSS clear attribute.
——-button mukva—–
The float Property
To position and format content, such as allowing an image to float left to the text in a container, use the float attribute.
One of the following values is possible for the float property:
- 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
The float property can be used to wrap text around pictures in its most basic form.
Example - float: right;
The following example specifies that an image should float to the right in a text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Example
img {
float: right;
}
Example - float: left;
The example that follows indicates that an image in a paragraph should float to the left:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Example
img {
float: left;
}
Example - No float
The image in the example below will be shown exactly where it appears in the text (float: none;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Example
img {
float: none;
}
Example - Float Next To Each Other
Divi elements are typically shown stacked on top of one another. Nevertheless, we may allow components to float adjacent to one another if we use float: left:
Example
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
