What is this function? A piece of code left by a UFO_html/css_WEB-ITnose

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}. . What is this function?

Reply to discussion (solution)

The css content attribute is used in conjunction with the :before and :after pseudo-elements to insert generated content.

The css content attribute is used in conjunction with the :before and :after pseudo-elements to insert generated content.

Insert something. . What happens after inserting

This is obviously the code used to clear floats

The perfect solution for clearing floats is the pseudo-class that triggers the private attribute hasLayout under IE to solve the problem

.cf:after{display:block;content:'';clear:both;}
.cf{zoom:1}

The predecessor of this method is to use empty tags to clear floats. However, since clearing and floating empty tags does not conform to the structural semantics (adding empty tags out of thin air), we use pseudo-classes to achieve this effect

css content attribute and :before and :after pseudo-classes Elements are used together to insert generated content.

Insert something. . What will happen after inserting
content The content in the quotation marks Here is a period

This is obviously the code used to clear floats

The perfect solution to clear floats is pseudo-class Trigger the private attribute hasLayout under IE to solve the problem

.cf:after{display:block;content:'';clear:both;}
.cf{zoom:1}

The predecessor of this method is to use empty tags to clear floats. However, because clearing floats with empty tags does not conform to the structural semantics (extra empty tags are created out of thin air), pseudo-classes are used to achieve this effect


Ignorance

The css content attribute is used in conjunction with the :before and :after pseudo-elements to insert generated content.

Insert something. . What will happen after inserting
content The content in the quotation marks Here is a period

Why add a period?

The css content attribute is used in conjunction with the :before and :after pseudo-elements to insert generated content.

Insert something. . What will happen after inserting
content The content in the quotation marks Here is a period

Why add a period?
You can add whatever you want, but it will still be displayed after adding it this way, so it is followed by visibility: hidden; invisible

In fact, it is not necessary, just content:'' and it will be empty. Strings are enough, and there is no need to hide

The css content attribute is used with :before and :after pseudo-elements to insert generated content.

Insert something. . What will happen after inserting
content The content in the quotation marks Here is a period

Why add a period?
You can add whatever you want, but it will still be displayed after adding it this way, so it is followed by visibility: hidden; invisible

In fact, it is not necessary, just content:'' and it will be empty. A string is enough. There is no need to hide

. Just use an empty string in content:''? ? What does it mean? . Nothing is added after that. . What's the purpose?