CSS Clear and Clearfix

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Clear and Clearfix

CSS Clear and Clearfix are two important concepts that are used to create clean and efficient layouts in web design. Clear is a property of CSS that allows you to specify which elements should not appear next to each other. Clearfix is a technique used to prevent elements from collapsing when the parent element is floated.

Clear is used to specify which elements should not appear side by side. This is useful when you want to make sure that a particular element is not placed next to another element. For example, if you want to make sure that two images don’t appear side by side, you can use the clear property to make sure that they don’t. You can use the clear property with the values left, right, both, or none.

The clear CSS property sets what elements can float beside the cleared element and on which side. The clear property applies to floating and non-floating elements. The clear property can have one of the following values:

Clear: none | left | right | both | inline-start | inline-end;

<div id="p1">paragraph1</div>
<div id="p2">paragraph2</div>

#p1{
    float: left;
    background-color: aqua;
    width: 100px;
    height: 100px;
}
#p2{
    clear:left;    
}

Clearfix is a technique used to prevent elements from collapsing when the parent element is floated. This is a common problem when dealing with floated elements, as they will often collapse if the parent element is not properly cleared. Clearfix is used to add an extra element to the parent element which prevents it from collapsing. This extra element is usually an empty div with the class of “clearfix”.