CSS Properties: How to prevent any element to be floated on the left or right both side of paragraph element?

Last update on February 20 2024 12:25:52 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to prevent any element to be floated on the left or right both side of paragraph element</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
.wrapper{
border:1px solid black; /* Adds a black border with a thickness of 1 pixel around the wrapper div */
padding:10px; /* Adds 10 pixels of padding inside the wrapper div */
}
img {
float: left; /* Floats the image to the left side */
clear: both; /* Clears any floating elements on both sides of the image */
}
.both {
border: 1px solid black; /* Adds a black border with a thickness of 1 pixel around elements with the class "both" */
clear: both; /* Clears any floating elements on both sides of elements with the class "both" */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<div class="wrapper"><!-- Starts a div with a class of "wrapper" -->
<img src="//www.w3resource.com/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50"><!-- Inserts an image with the w3resource logo, setting its width and height -->
<p class="both">This paragraph is clears both</p><!-- Inserts a paragraph element with the class "both" -->
</div><!-- Ends the div with a class of "wrapper" -->
</body>
</html>

Explanation:

This HTML document demonstrates how to prevent any element from being floated on both the left and right sides of a paragraph element.
The HTML structure includes a wrapper <div> with a class of "wrapper" containing an image and a paragraph.
CSS is used to style the wrapper div, setting a black border with a thickness of 1 pixel and adding 10 pixels of padding inside.
Images are styled to float to the left side using float: left; and clear any floating elements on both sides using clear: both;.
This ensures that no other elements will float on either side of the image.
Paragraph elements with the class "both" are also cleared on both sides using clear: both;, ensuring that no other floated elements will appear on either side of them.

Live Demo:

See the Pen clear-both-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page