HTML-CSS: Clearfix

Last update on March 08 2024 13:34:59 (UTC/GMT +8 hours)

HTML-CSS : Exercise-17 with Solution

Using HTML, CSS ensures that an element self-clears its children.

Use the :after pseudo-element and apply content: '' to allow it to affect layout.
Use clear: both to make the element clear past both left and right floats.
For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).
Note: This is only useful if you are using float to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html><!-- Defines this document as HTML5 -->
<html><!-- Start of the HTML document -->
<head><!-- Start of the head section -->
<meta charset="utf-8"><!-- Defines character encoding to UTF-8 -->
<meta name="viewport" content="width=device-width"><!-- Sets the viewport width to the device width for responsiveness -->
<title>Using HTML, CSS ensures that an element self-clears its children</title><!-- Sets the title of the document -->
</head><!-- End of the head section -->
<body><!-- Start of the body section -->
<div class="clearfix"><!-- Start of a container div with class 'clearfix' -->
<div class="floated">1st Item </div><!-- First floated item within the container div -->
<div class="floated">2nd Item </div><!-- Second floated item within the container div -->
<div class="floated">3rd Item </div><!-- Third floated item within the container div -->
</div><!-- End of the container div -->
</body><!-- End of the body section -->
</html><!-- End of the HTML document -->

Explanation:

This HTML document sets up a simple structure with three floated items inside a container.
Each floated item is contained within a <div> element with the class "floated".
The container div has a class "clearfix", which is typically used to clear floated elements within it.
However, there is no CSS provided in the code to implement the clearfix behavior, so the floated elements might not behave as intended.

CSS Code:

<style> /* Opening style tag for CSS */
/* Embedded CSS styles for the HTML document */
.clearfix:after { /* Defines a pseudo-element after the element with class 'clearfix' */
  content: ''; /* Adds an empty content to the pseudo-element */
  display: block; /* Makes the pseudo-element a block-level element */
  clear: both; /* Clears floats on both sides of the pseudo-element */
}

.floated { /* Defines styles for elements with class 'floated' */
  float: left; /* Floats the element to the left */
  padding: 4px; /* Adds padding around the element */
}
<style> /* Ending style tag for CSS */

Explanation:

.clearfix:after: This selector targets pseudo-elements that come after elements with the class "clearfix".

content: '': This line adds empty content to the pseudo-element. This is necessary for the pseudo-element to be rendered.
display: block;: This property makes the pseudo-element a block-level element. Block-level elements take up the full width available and start on a new line.
clear: both;: This property clears any floated elements on both sides of the pseudo-element. It ensures that the element containing floated elements expands to contain them properly.

.floated: This selector targets elements with the class "floated".

float: left;: This property floats the element to the left within its containing element. Floating an element takes it out of the normal flow of the document and allows other elements to wrap around it.
padding: 4px;: This property adds 4 pixels of padding around the element, providing space between the content and its border.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.