A brief analysis of floating and cleaning in CSS-CSS Tutorial-php.cn

As a front-end, I have written a lot of page layouts, but floating has always been a blind spot that I don’t understand. On the one hand, floating can be used to achieve many layouts, but on the other hand, the impact of floating will destroy the layout and cause headaches, so Today I will write a blog post to address this blind spot.

This article mainly discusses the following issues:
1. The original purpose of floating
2. Why floating has a text wrapping effect
3. How to clean up the impact of floating

Original uses of float

The following content comes from Zhang Xinxu’s "In-depth Research, Detailed Explanation and Expansion of CSS Float (1)":

Assume that there is no float in CSS now ( float) attribute, what will it look like. We will find that whether it is column layout or list arrangement that is currently popularly implemented using the floating method, we can use some other CSS properties (regardless of table) to implement it. The only thing that cannot be implemented is "text wrapping around pictures". I am I can't think of any way to wrap the text around the image. Well, this irreplaceable role is the real meaning of float.

To sum up in one sentence: Achieve the effect of text surrounding the picture.

Why does floating have a text wrapping effect?

This question mainly comes from past impressions:

Floating elements are separated from the document flow.

Huh? If you are out of the document flow, shouldn't it overlap with the unfloated elements below? Why can the text still wrap around you?

This problem has been bothering me until I saw the book "Mastering CSS". The article writes:

Floating will cause elements to break out of the document flow and will no longer affect non-floating elements. Actually, not entirely. If there is an element in the document flow behind the floated element, then the box of this element will behave as if the float does not exist at all. However, the text content of the box will be affected by the floating element and will move to make space.

In other words, floating elements are indeed separated from the document flow, so the block box in the document flow will ignore the floating elements, but the text will not . This is different from absolute positioning out of the document flow.

Senior Zhang Qiuyi’s answer on Zhihu also confirms this view.

Additional point: The term document flow is actually inaccurate. In the W3C standard, there is only normal flow (normal flow), but many domestic articles and translated books use document flow. Over time, everyone will In terms of document flow.

How to clean up the impact caused by floating

In fact, the main impact caused by floating is

1. The height collapse of the parent element caused by the element breaking away from the ordinary flow
2. Below Non-text elements overlap with floating elements, destroying the original layout

To clean up these effects, many people know to use the clear attribute. Why can clear clear floats?

There are two opinions:
1. BrowserAdd enough margins on top of the clear element so that the upper border of the element drops vertically to the lower edge of the floating element below the distance.
2.Add clear space above the top margin of the clear element, while the margin itself does not change.

The former is the implementation principle of CSS1 and CSS2, and the latter is the implementation principle of CSS2.1. But no matter which one is achieved, vertical space is left for the floating elements, which seems to clear the floating effect. At the same time, the space filled above the set clear element is actually present in the normal flow. Therefore, the height of the parent element is stretched.

There are actually many ways to clear floats. In the article "The Floats We Cleared Together in Those Years", the methods of clearing floats are simply divided into two categories:

1. By adding an empty element at the end of the floating element, set clear: both attributes, the after pseudo-element actually generates a block-level element with a point content behind the element through content;
2. Close the float by setting the overflow or display: table attribute of the parent element.

Almost all methods for clearing floats can be classified into these two categories. Let’s talk about the method of adding pseudo elements in conjunction with the above blog post:

1.display: block , so that the generated elements are displayed as block-level elements and occupy the remaining space.
2. Add a dot in content because this character is very small.
3. Set height to 0, because you don’t want this new content to occupy space and destroy the layout height.
4. Set visibility to hidden to make the generated content invisible, allowing parts that may be covered by the generated content to be clickable and interactive.
5.clear: Both clear the impact of floating

The code is as follows:

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

Copy after login

This method is effective in most modern browsers and is also recommended. As for other methods, there are many online, so I won’t go into details here.

This article draws on some other blogs and documents, with links attached:

Reference links:

CSS clear attribute

CSS float

Understanding CSS float and clear float

The floats we cleared together in those years

noraml flow

In-depth research, detailed explanation and expansion of CSS float float (1)

Zhang Qiuyi’s answer