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

Last update on February 20 2024 12:24:56 (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 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 */
}
.left {
border: 1px solid black; /* Adds a black border with a thickness of 1 pixel around elements with the class "left" */
clear: left; /* Clears any floating elements on the left side of elements with the class "left" */
}
p {
width: 50%; /* Sets the width of paragraph elements to 50% of their containing block */
}
</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="left">This paragraph is clears left</p><!-- Inserts a paragraph element with the class "left" -->
</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 the left side 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.
Elements with the class "left" are styled with a black border and are cleared on the left side, ensuring that no floated elements appear to their left.
Paragraph elements are styled to have a width of 50% of their containing block, allowing them to take up half the width of their parent element.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page