Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use pseudo elements: after clear floating parent elements of the height of 0", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use pseudo elements: after clear floating parent elements of the height of 0" bar!

Float:left/right is often used when making a page render a multi-column layout, but the floating layout will cause the height of the parent element to be 0 (without setting the height), which will not change according to the height of the child element. In addition, there is no need to float the tags that you want to display in the next row appear after the floating element.

The code is as follows:

# content {background:#000;}

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

So when we use floats for layout, we need a block-level element (invalid inline elements) to set the clear attribute. If there is an element below the floating element, we can set the clear:both directly to the element. If there are no other elements to display, we often write a blank tag to clear the float.

The code is as follows:

But this will undoubtedly increase the rendering burden on the browser, so consider using the pseudo element: after instead of this blank tag, because clearing the float needs to be after the floating element, so you cannot use: before, set content: "to: after, and make its display:block a block-level element to clear the float after clear:both:

The code is as follows:

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

This method is not valid in ie6, 7, and needs to set zoom:1 on # content.

Thank you for your reading, the above is "how to use pseudo elements: after clear floating parent element height is 0" of the content, after the study of this article, I believe you on how to use pseudo elements: after clear floating parent element height of 0 this problem has a deeper understanding, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.