Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to clear HTML float". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to clear HTML float".

1. Understand clearing floats

1. Why clear floats

As we said earlier, floating is essentially used to do some text mixing effects, but when we use it as a layout, there will be a lot of problems.

Because the floating element no longer occupies the location of the original document stream, it will have an impact on the typesetting of subsequent elements, and in order to solve these problems, you need to clear the float in this element. To be exact, it is not to clear the float, but to clear the impact of the float.

2. Clear the essence of floating

Clear the essence of floats: mainly to solve the problem that the internal height of the parent element is 0 because of the child floats.

Let's explain this sentence in detail.

The next explanation is that a parent p below the standard stream does not set the height attribute, then its height will be stretched by the height of the child element. But if the child element in the parent p is floating, if there is any more under the parent p

A brother p, then the brother p will obscure the parent element. This phenomenon is also called floating overflow.

Example

Document {height: 200px; border: 1px solid red; width: 300px} .big {width: 100px; height: 100px; background-color: purple; float: left;} .small {width: 80px; height: 80px; background-color: blue; float: left } .footer {width: 400px; height: 100px; background-color: pink;} parent p child p

Sub-p

Brother p

Running result

Obviously here, p1 and p2 have floated, while brother p has moved up. Here because the father p has words, it occupies a bit of height, otherwise the brother p will completely cover the father p.

Of course, we can set the height of father p so that it is not covered by brother p. For example, height: 200px is set here.

Refresh the next page

When the height of the parent p is set, the problem of being overwritten is solved, but in many cases we will not set the height of the parent p, because very often we do not know how much the height of the parent p should be set.

So at this time, we need to think about and solve this problem.

Second, the method of clearing the float

The essence of the method of removing floats is to circle the floating boxes in the parent box so that the exits and entrances of the parent boxes are closed so that they do not come out to affect other elements.

In CSS, the clear property is used to clear floats.

Basic grammatical format

Selector {clear: property value;}

Attribute value

1. Additional labeling method

By adding an empty tag at the end of the floating element, for example

We added it in the above code

Father p child p

Sub-p

Brother p

It's a perfect solution.

The advantages are easy to understand and easy to write.

The disadvantage of adding meaningless tags is poorly structured.

2. Parent add overflow attribute method

You can achieve the effect of clearing floats by triggering BFC. (I'll talk about it later on BFC)

You can add the parent element: overflow is hidden | auto | scroll can be implemented.

We modify the above code to

Father p child p

Sub-p

Brother p

It can also achieve the effect of removing floating.

Advantage code simplicity

When the defect content increases, it is easy to cause the content not to wrap automatically, which leads to the content being hidden and unable to show the elements that need to overflow.

3. Use after pseudo elements to clear floats

After is an upgraded version of empty elements. The advantage is that there is no need to tag separately. * *

Example

Use after pseudo elements to clear floats. Clearfix: after {/ * normal browser clears floats * / content: ""; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {* zoom: 1 / * zoom 1 is the way ie6 clears the float * /}. Border: 1px solid red; width: 300px;} .big {width: 100px; height: 100px; background-color: purple; float: left;} .small {width: 80px; height: 80px; background-color: blue Float: left;} .footer {width: 400px; height: 100px; background-color: pink;}

The advantages are in line with the idea of closed floating, and the structure is semantically correct.

The disadvantage is that because IE6-7 does not support: after, use zoom:1 to trigger hasLayout.

Note: content: "." Try to follow a small dot inside, or others, try not to be empty, otherwise there will be spaces generated in the version before firefox 7. 0.

4. Use before and after double pseudo elements to clear the float

Use the method to replace the above clearfix style with the following

.clearfix: before, .clearfix: after {content: "; display: table;} .clearfix: after {clear: both;} .clearfix {* zoom: 1;}

Advantage code is more concise

The disadvantage is that because IE6-7 does not support: after, use zoom:1 to trigger hasLayout.

5. Summary

1. Use: after pseudo-element method as the main way to clean up and float in the main layout of the web page. The document structure is clearer; 2, in the small module such as ul, it is recommended to use overflow:hidden; (while paying attention to the possible hidden overflow element problems); thank you for reading, the above is the content of "HTML floating how to clear", after the study of this article, I believe you have a deeper understanding of how to remove HTML floating this problem, the specific use of the situation also needs to be verified in practice. 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.