What does css float mean? Why does css need to clear floats?

In the process of learning CSS, we often see css float and css clear float. So, what does css float mean? Why does css need to clear floats? This article will introduce to you the meaning of CSS floating and the reasons why CSS clears floating.

1. First, let’s take a look at what does CSS floating mean?

We can know from Baidu Encyclopedia: float is the positioning attribute in css style, used to set label objects (such as:

label box, label, tag and other html tags) floating layout, floating is what we call the label object floating to the left (float:left) and floating to the right (float:right).

In CSS, we realize the floating of elements through the float attribute. (For more information on float attributes, please refer to css manual)

The meaning mentioned above seems to come and go, so let’s explain it in a layman’s terms below.

You must know that some elements in css are block-level elements, and they will automatically enable a new line (block-level element reference article: What is the definition of css block-level elements? What are the css block-level elements? ?), there is another type of inline elements, which are inline elements. They will remain displayed in "one line" with the previous content (inline elements reference article: What are the css inline elements? css block-level elements The difference from inline elements); but sometimes we need to change this layout method, which requires using CSS floating.

CSS floats allow a given element to move to one side of its row and allow other content to flow downward. A right-floated element will be pushed to the right side of its container, and content will flow down its left side. An element with a float will be pushed to the left, and its content will flow down its right side. flow down.

After reading the meaning of CSS floating, let’s take a look at why CSS needs to clear floating?

2. Why does CSS need to clear floats?

After the above explanation of what css floating means, we know that css floating must exist in some cases, so why should we clear the floating?

We need to know: a floating box can move left and right until it encounters another floating box or a containing box on its outer edge. The floating box does not belong to the ordinary flow in the document flow. When the element is floated, it will not affect the layout of block-level elements, but will only affect the layout of inline elements. At this time, the normal flow in the document flow will show that the floating box does not have the same layout mode. When the height of the containing box is smaller than the floating box, "height collapse" will occur. At this time, it is necessary to clear the float.

To put it simply:

For example: if the float is not cleared, the problem of div overlap will occur. You make a web page with a header block at the top, two columns of content blocks in the middle, and a footer block at the bottom. You set a left float in the middle content block, and the heights of the two blocks are inconsistent. If one block is higher, then the float needs to be cleared in the footer. If the float is not cleared, the footer block will overlap with one of the contents, such as Picture:

Related recommendations:

What does css floating mean? The principle of css floating and the method of css clearing floating (with code)

What is floating? The principle of css clearing floating

The above is the detailed content of What does css float mean? Why does css need to clear floats?. For more information, please follow other related articles on the PHP Chinese website!