How does clear work in CSS?

Note: I just translated the text below and posted it here. References are at the end of this article.

The CSS property clear works with respect to the CSS property float. It defines whether an element should be moved below the "floating" elements that precede it.

Let's understand this with the help of an example.

We will consider four blocks red, yellow, blue and green which will be added one after another and all of them will be placed on the same level.

Then we will make each element "float" to the "left" one by one, which means they will be moved one level above their initial position. This will allow other "non-floating" elements to wrap around the floating element.

Note - The next block will occupy the position of the floating block, so it is not visible. When we change the dimension of the next block, we observe that it is covered with the floating block that is present one layer above it.

After that, we will apply clear:left to the blue block, which means that no element will be floating to the left of the blue block.

With the help of the CSS property clear we can specify which side of the floating elements cannot perform the float. It defines or returns the position in relation to floating objects.

Values ​​accepted in CSS property clear

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}

Below is the code for the examples shown above:

HTML:

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>

CSS:

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}

I tried to cover how the CSS property clear works using a basic example for better understanding. Please share your examples and feel free to add to this post?.

Happy learning!??‍?

Source

Article written by Jasmin Virdi.

The above is the detailed content of How does clear work in CSS?. For more information, please follow other related articles on the PHP Chinese website!