As a rule, all blocks and elements on a web page in the browser appear in the order in which they are defined in the html code. However, CSS provides a special float property that allows us to set the flow around elements, so we can create more interesting and varied web pages.
This property can take one of the following values:
- left: the element floats to the left, and all content below it wraps around the right edge of the element
- right: the element is moved to the right
- none: cancels wrapping and returns the object to its normal position
When using the float property on styled elements other than the img element, it is recommended to set the width property.
So, let’s imagine that we need to display an image on the page to the left of the main text, there should be a sidebar on the right, and the rest of the space should be occupied by the main text of the article. Let’s define the page interface first without the float property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrapping in CSS3</title>
</head>
<body>
<div>
<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<img src="back.jpg" class="image" alt="Wrapping in CSS3" width="500px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. </p>
</div>
</body>
</html>
In this case, we will get a consistent placement of elements on the page:
Now, on the same page, apply the property float by changing the styles as follows:
.image {
float:left; /* wrap left */
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
float: right;
}
The placement of elements on the page will change accordingly:
The elements to which the property is applied float are also called floating elements or floating elements.
Flow prohibition. clear property
Sometimes it becomes necessary to disable flow. A similar task may be relevant if a block should wrap down to a new line, and not wrap around a floating element. For example, the footer, as a rule, should be strictly below and stretch across the entire width of the page. If there is a floating element in front of the footer, then the footer can wrap around this element, which is not desirable.
To prevent elements from wrapping, CSS uses the clear property , which tells the browser that no wrapping should be applied to the element being styled.
The property clear can take the following values:
- left: The styled element can wrap around the floating element to the right. Wrapping on the left doesn’t work.
- right: A styled element can only wrap around a floated element to the left. Right side wrap doesn’t work
- both: the styled element can wrap around floating elements and move down relative to them
- none: the styled element behaves in a standard way, i.e. it takes part in the right and left flow
For example, let’s define a footer on a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrapping in CSS3</title>
</head>
<body>
<img src="back.jpg" class="image" alt="Oak trees" />
<div class="footer">Copyright © easywptutorials. 2023
</body>
</html>
The presence of wrapping will create an incorrect display, in which the footer moves up:
Let’s change the style of the footer:
.footer{
border-top: 1px solid #ccc;
clear: both;
}
Now the footer will not wrap around the image, but will go down.
