![]() |
VOOZH | about |
CSS layout is used to control how elements are positioned and arranged on a webpage. The "float" and "clear" properties help in organizing content, ensuring proper alignment and preventing wrapping around elements.
The CSS float property allows elements to be positioned to the left or right of their container, allowing inline content (like text) to wrap around it. It is commonly used to create layouts, such as columns, where the text or other elements wrap around floated items.
Syntax
.element {
float: left | right | none | inherit;
}
| Value | Description |
|---|---|
left | Floats the element to the left side of its container. |
right | Floats the element to the right side of its container. |
none | Removes the float and keeps the element in the normal flow. |
inherit | Inherits the float property from its parent element. |
Floats the element to the left side of its container.
Floats the element to the right side of its container.
Removes the float and keeps the element in the normal flow.
Inherits the float property from its parent element.
The CSS clear property controls the behavior of elements in relation to floated elements. It specifies whether an element should be placed next to or below floated elements.
Syntax
.element {
clear: left | right | both | none | inherit;
}
| Value | Description |
|---|---|
none | No effect on adjacent elements, allowing them to position freely. |
left | Forces the element below any left-floating elements. |
right | Forces the element below any right-floating elements. |
both | Forces the element below both left and right floating elements. |
inherit | Inherits the clear property from its parent element. |
Prevents the element from being adjacent to left-floated elements.
Prevents the element from being adjacent to right-floated elements.
Prevents the element from being adjacent to both left and right-floated elements.
Allows the element to be adjacent to floated elements (default behavior).