How to clear elements ?

Question

my trainer teach m that we use pseudo element (: :before) before clearing the element.but I saw here , we just th clear keyword to clear the element.. anyone can clarify me the difference between them?
ok I want to give more details about what my question
my trainer has written the following lines of code to clear the float:

.box-container::after{
content:"";
display:block;
clear:both;
}
so , my question is what is the difference between using these lines of codes and simply use clear :both ;

Answer 1

I think there's a tiny detail missing.

I believe what you are probably referring to is the difference between clear (a property) and clearfix (a hack that's usually used in the ::before or ::after pseudo element).

Clear says (roughly) "I don't want you to put other things on this side of this element/thing".

https://css-tricks.com/almanac/properties/c/clear/

Clearfix says (roughly) "I want all the things in this container to look like they are grouped together".

https://www.w3schools.com/howto/howto_css_clearfix.asp

This is only if I've guessed correctly what you're asking about.

Hope this helps?

Answer 2

thanks again

Answer 3

ok I want to give more details about what my question
my trainer has written the following lines of code to clear the float:
.box-container::after{
content:"";
display:block;
clear:both;
}
so , my question is what is the difference between using these lines of codes and simply use clear :both ;

Answer 4

The best thing to do is to try it to see the difference.

Clear: both; on an element applies to the element. A clearfix hack (such as the one you posted) usually gets applied to the parent (container) of the element you want cleared.

Addendum:

A div without content takes up no space, so ::after { content: ""; } inserts fake content so that the div can take up space while minimizing unexpected results.

Answer 5

:)