Use the pseudo element: after to clear the floating, the pseudo element after floating

Use the pseudo element: after to clear the floating, the pseudo element after floating

Float: left/right is often used when the page is displayed with multiple columns, but the floating layout will cause the height of the parent element to be 0 (when the height is not set ), it does not change according to the height of the child element. In addition, the label displayed in the next row does not need to be floating behind the floating element.

#content{background:#000;}.left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;}

Therefore, when we use floating layout, we need a block-level element (the element in the row is invalid) to set the clear attribute. If there is an element below the floating element, then we can directly set clear: both for this element. If no other elements need to be displayed, We will usually write a blank tag to clear the floating

<div style="clear:both"></div>

However, this will undoubtedly increase the rendering burden of the browser. Therefore, we should consider using the pseudo element: after to replace this blank label. Because clearing the floating should be behind the floating element, we cannot use before, for: after, set content: "" and make its display: block into a block-level element. Then clear: both to clear the floating:

#content:after{content:"";display:block;clear:both;}

This method is invalid in ie6 and 7. You need to set zoom: 1 for # content.

I have never seen this writing method in css styles. I want to explain whether it is wrong to write.

. Clearfix: after {content :". "; display: block; height: 0; clear: both; visibility: hidden }. clearfix {display: inline-block} * html. clearfix {height: 1% }. clearfix {display: block} is a "floating removal" method compatible with browsers, compliance with semantics and W3C standards.
Previously, "clear: both;" was set with an empty label to clear the float, which is compatible with various browsers, but does not comply with semantics and W3C standards.
You can add nodes after the specified elements through the pseudo-element: after and content attributes of CSS. nodes are usually added after the floating element and the floating clear attribute can be removed for the new node.


What is after in CSS?

Apart from them, there are also some uncommonly used pseudo classes, such as focus,: first-child, and: lang.
Besides, CSS contains not only pseudo classes but also pseudo elements, such as: first-letter,: first-line,: before, And: after.
Other pseudo elements in this article are not listed at the moment. Simply put, they are the "after" pseudo elements.
As the name implies, "after" refers to the meaning behind an element. The essence is to add content after the element.
This pseudo element allows the Creator to insert the generated content at the end of the element content. It must be used with the content attribute to set the content after the object. By default, this pseudo element is an inline line element, but you can use the property display to change this.
All mainstream browsers support the "after" pseudo element, but for IE, only IE8 and later versions are supported.
The following is an example of inserting in CSS code:
<Style type = "text/css"
H1: after {content: url(logo.gif)} </styleHtml:

When displayed, an image is inserted after the title content. This is the role of the pseudo element: after.
Pseudo element: Another common function of after is mentioned in the original article. Some people may remember that it is to clear the floating.
Add the content with the CSS pseudo class: after to CSS:
. Clear: after {height: 0; content :".";
Clear: both;