There are several methods to clear float and float.

There are several methods to clear float and float.

It was not until I wrote this article that I carefully studied the principle of each floating clearing method (⊙) B.

For those who just came into contact with CSS, just like me at the time, when I was doing some small projects and exercises, I always inexplicably asked myself, "Hey !? Where did my div go !? (⊙ O ⊙) "and then silently Add a background color to see where I 've worked so hard to write small blocks.

It turns out that the floating is not cleared and is covered by the above _ (: too many rows )_

I always forget to clear the float, which is my most fatal problem. So let's sum up the method and let your hands and brains stop forgetting to clear these annoying float) /~~

When we add a float to our small div and arrange them neatly, his parent box is not supported by the content, because we know that the float will be out of the Document Stream, let floating elements enter the floating layer.

When we write other content, it will be covered, such as this gray div ~

So how can we clear the float ......

Method 1: Give the parent level a height

This method is the simplest and best understood. Its principle is to give the parent a height so that the following elements know the above three elements, A father gave them a day.

Method 2: add new elements and use clear: both

In this way, add a sibling element to the sibling element, and give the sibling element a clear: both attribute. The clear attribute is that the elements specified by the attribute cannot be floating.

Both indicates that float is not allowed on both sides. The clear attribute can also be left (float elements are not allowed on the left) and right (float elements are not allowed on the right ), the default value is none (floating elements can appear on both sides ).

Method 3: parent-level overflow

Add the overflow attribute to the parent class to clear the floating, overflow: hidden and overflow: auto

　　

However, I have been wondering why overflow can clear the float, so I checked the information:

Overflow: hidden indicates that the excess part needs to be cropped and hidden. If the floating element does not occupy the normal stream position, the inclusion block of the normal stream must be cropped and hidden Based on the Content height, if the height of the floating element is not calculated, the floating content may be dropped.

If the height of the container is not explicitly set, it must calculate the height of all the content to determine the position of the crop. The floating height will be calculated and the floating clearance goal will be achieved.

The above are the materials to be queried.

Method 4: after Method

This method is not familiar to people like me who have just learned for a month, but I know this method by checking materials when I do projects, in addition, this method is widely used and popular nowadays. The following content is from materials and is only used for personal memory and reference.

Principle: This method is one of the most popular methods on the Internet to clear the floating, which uses: after and: before to insert two element blocks inside the element, to clear the float from the surface. The implementation principle is similar to the clear: both method, but the difference is that clear inserts a div in html. the clear label, while the outer uses its pseudo class clear: after to add a div-like inside the element. clear effect.

　　

Clear: both; indicates clearing all floating; content :'. '; display: block; it cannot be missing for FF/chrome/opera/IE8, and content () can be set to or empty. Visibility: hidden; allows the browser to render it, but does not display it, in order to clear the floating.

 

The above are the four methods to clear the floating, but not every method can be well applied. For example, the compatibility mentioned in the fourth method, only the fourth method has good compatibility, so I want to learn more about this, and I will learn more about and apply the fourth method in my future studies and work.

So now I know, no wonder that when I was working on a project, there was always the "after" on the webpage. (⊙ V ⊙)