For some people who are new to html, they often use floating layouts, but it is a big headache for the use of floating and clearing floating. Here are a few methods for clearing floating. If you say that what you want is the float and why you want to clear the float, then I'm really speechless, then you can pretend that I didn't say it.
When we lay out, we often use floating and positioning, especially when it comes to the website layout with adaptive width and height, "Hey! Why is the style set by the box of my parent element missing?", when you Once I press F12, after searching for it thousands of times in many codes, I finally look back and find that the box in the thousands of flowers shows that the height is zero, what, why is my height zero? Isn't it said that the parent element can be propped up by the child element? What's going on here, is there something wrong with my IQ? Is it not suitable for me to learn this? Why can't someone else's can mine? Is the browser targeting me? In fact, this kind of problem will be encountered by everyone at the beginning of learning this. This is a typical problem of height collapse of parent elements. This problem is mainly due to the use of floating or positioning in your child elements.
We all know that floating and positioning are to make the element out of the document flow. Simply speaking, it does not occupy a position on the web page and is not arranged in the order specified by the browser. It floats on the document flow. The element does not occupy a position, and the parent element is equivalent to an empty box. It's like a balloon. At the beginning, you fill the balloon with water, and the balloon will naturally expand. When you sometimes need to pour water into the cup, the balloon will deflate naturally after pouring it into the cup. The child element is equivalent to water, and the parent element is equivalent to a balloon. Floating and positioning are equivalent to taking out the water and placing it in a separate container. To make the original balloon stand up again, we need to put the water back, but If the water is poured in again, it will lose the meaning of putting the water in the cup, so now there is only one way to put the cup into the balloon. The application of this method in the web page is to clear the float. There are many ways to clear floats, and now let's talk about a few common ways to clear floats (the real thing is just now).
The first is to add height to the parent element. Maybe someone will say, what kind of bullshit method is this? I can still worry about the height of the parent element from collapsing if I can give it the height? It is undeniable that this is the easiest method, you don't have to do a height:**px to solve the problem, but this method is the same as nothing for websites with adaptive width and height or fluid layout. One word "can't give". We are not helpless in the face of this inability to give.
The second method is to add float to the parent element when the child element floats, but this will cause the height of the parent element of the parent element to collapse, and then we add float to the parent element of the parent element, so the parent element of the parent element has a The parent element collapses again, however we need to continue adding floats to the parent element's parent element's parent element. This addition may affect the eighteen generations of the ancestors of the child elements, so this method can only solve the current problem, and may cause a series of troubles, so it is not desirable. This is the third method we need.
The third is to use clear:both, the clear property does not allow the left/right side of the cleared floating element to be next to the floating element, that is, we need to add it on the sibling element, but the sibling element cannot be a floating element and must be inside the parent element The last element, but if the child elements are in the same row, an empty element must be added at the end to set clear, which adds redundant code, and IE6 and IE7 do not support this property. And this will be a nightmare in later maintenance, which is absolutely unbearable. Well now there is another way.
The fourth method is to use display: inline-block. This method does not need to give float, no matter how many sub-elements you have in a row, and directly give all of them this attribute. Inline-block is to convert sub-elements into inline blocks. It should be We all know that inline blocks are displayed directly in a line, so naturally there is no need to use floats. If you don’t use floats, there will be no height collapse problem, but it will bring two bugs, one will be generated between the inline block and other elements. Gap, but this can be solved by adding font-size: 0 to the parent element. Another problem is that when there is no content in the inline block, it is arranged according to the bottom alignment of the box. When there is content in the block, the inline block It is arranged according to the bottom alignment of the content. At this time, we need to use vertical-align to set the alignment of elements. If there are multiple elements in a row, we need to set all of this property, which means that we use this method to To solve the BUG brought by this method, this method also has a fatal problem, that is, IE6 and IE7 are also incompatible. So no matter how awesome the method is, it can't escape the fate of being killed by IE6. So this method is not perfect, so let's find out if there is any way.
The fifth is to add overflow:hidden to the parent element; when the child element is floating, we only need to add an overflow:hidden to the parent element; we should know that this is to cut the content beyond the box, so someone has to ask , why this can also be clearly floated, this will involve BFC, all attributes that can trigger BFC can solve the problem of height collapse, as for what is BFC, you can go to Baidu to check, but this method is like the third and third The four methods are the same. When we encounter the evil IE6 and IE7, we are also game over. Another point is that when overflow encounters absolute positioning and relative positioning, it is also GG. At this time, we should not be discouraged. Maybe you will ask, the world is so Isn't there a perfect solution to the height collapse? Now let's look at the sixth method.
The sixth method is our commonly used positioning. When we use floating for child elements, when we use relative positioning (position: absolute) or fixed positioning (fixed) for parent elements, we can solve the problem of height collapse. Because fixed positioning is generally used in special cases, we only use relative positioning (absolute), but this is limited, and can only clear the height collapse caused by floating. If the child element uses relative positioning, This method is useless. Although this method does not involve compatibility issues like the previous methods, its limitations are evident. Speaking of which, maybe you will ask blankly, I dare you to say so much nonsense, isn't there a perfect solution to floating? Well... Now that we've said this, let's release our ultimate move now. There is really a way to solve it, and this is the last way we should mention.
The last method is the pseudo-class removal method, which is the legendary universal removal method, which is compatible with any browser including IE6. This method is as follows:
.clear:after{
content:'''';
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{zoom:1;}
You should see the above code. This is formed by combining all the above methods. .clear is the class name, which can be taken arbitrarily, but this class name is used for semantics. Although this method looks complicated, In fact, we only need to add this style to the initialization. When we need to clear the float, we only need to add a class name clear to the collapsed element. It looks complicated and it is very convenient to use.