Why does css have the problem of clearing floats?

The reason for the problem of clearing floats in css: under the standard flow, the parent element does not have a height attribute set, and the child elements in the parent element are floating. Since the floating elements no longer occupy the position of the original document flow, the floating elements no longer occupy the position of the original document flow. The height of the element will not be calculated into the height of the parent element, that is, it will appear collapsed.

The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.

1. Why does the problem of clearing floats occur?

(Learning video recommendation: java video tutorial)

If a parent element does not have a height attribute set under the standard flow, its height will be determined by the height of the child element. Open up, that is, adaptive. But if the child element in this parent element is floating, since the floating element no longer occupies the position of the original document flow, the height of the floating element will not be calculated in the height of the parent element, and the height of the parent element will be 0, that is, it will appear collapsed. status. In order to solve this kind of problem, we proposed to clear the float.

2. How to use CSS to clear floats?

1. Directly add height to the parent element

But it does not apply when the height of the floating element is uncertain

2. Directly use clear: both

Add a block-level tag (p, div, etc.) directly at the bottom of the parent element, and then give it clear: both to clear the float.

But this will produce a large number of useless empty elements, waste resources, and is not the optimal solution

3. Use BFC:

(1) What is BFC

Literally translated as "block-level formatting context". It is an independent rendering area and an independent layout environment in which the element layout is not affected by the outside world. In a BFC, block boxes and line boxes (line boxes are composed of all inline elements in a row) ) will be arranged vertically along the border of its parent element. BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside. And vice versa.

(2) Solution 1:

Add overflow: hidden (as long as it is not visible) to the parent element style. After adding this statement, a BFC will be created and floating elements will be trapped in the BFC. , to prevent it from leaving the document flow, the height of the floating element will be calculated first, and then hidden. When the parent element obtains the height, it will be opened

(3) Solution 2:

give Add floating float: right to the parent element (as long as it is not none). Adding this statement will also create a BFC. The principle is the same, but sometimes we don’t need to float the parent element, which goes against our needs

4. Use the pseudo-class

to generate the sibling elements of the floating element through the ::after pseudo-element of the parent element, and then use the clear:both method for the sibling elements.

Related recommendations: CSS tutorial

The above is the detailed content of Why does css have the problem of clearing floats?. For more information, please follow other related articles on the PHP Chinese website!