Computer scienceFrontendCSSBasic propertiesPositioning

Clear

Fix The Code

Report a typo

The float and clear properties can be very useful, but sometimes the result may not come out the way we want.

That's what happened to John, he was writing a text about the clear property but he ended up confusing clear with float.
Help John make his page look like in the image below.

The text is wraps around two images

Write HTML and CSS code

<!DOCTYPE html>

<html>

<head>

<title>CSS Clear</title>

</head>

<body>

The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block's top margin collapses.

</p>

Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.<br>

Source: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clear">MDN</a>

</p>

</div>

</body>

</html>

Completed 2 of 4

The first image is positioned correctly.

The second image is correctly positioned.

___

Create a free account to access the full topic