Detailed explanation of why css parent class clears floats

Floating elements are often used in static web page production. For example, if you want block-level elements to not occupy a single line, you often use float settings to achieve this. However, when applying, you will find that after setting the subclass float, the float is not cleared for the parent class, which will cause the following problems:

　　　　　1. The floating element will be relative to the parent container or the front The positioned element is floated. The floated element is separated from the document flow, that is, it no longer occupies its original position, and will affect subsequent elements or the parent container.

　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 over over/under. Normally, the parent container will automatically expand in height. However, after the child element is floated, its position will not be retained. The parent container will feel that it does not exist, so it will not expand in height.

Therefore, when writing static web pages, you must pay attention to the problem of clearing floats. A piece of code to clear floats can be easily called:

　.clearFloat:after{
　　　　　　　　　　　　　　　　content:' ';
　　　　　　　　　　　　　　　　display:block;
　　　　　　　　　　　　　　　　height:0;
　　　　　　　　　　　　　　　　visibility:hidden;
}
　　　　　　　　　　.clearFloat{
　　　　　　　　　　　　　　　　zoom:1;
}

The above is the detailed content of Detailed explanation of why css parent class clears floats. For more information, please follow other related articles on the PHP Chinese website!