Analysis of floating and cleaning in CSS

As the front-end to write a lot of page layout, but floating this piece has been my indefinitely blind spot, on the one hand with floating can achieve a lot of layout, on the other hand, the impact of floating will damage the layout of people headaches, so today, specifically to write a blog to solve this blind spot.

This article mainly discusses the following issues:
1. Original use of the float
2. Why does floating have text wrapping effect
3. How to clean up the impact of floating

The original purpose of the float

The following is from Zhang Xin Asahi great God's "CSS float floating in-depth research, elaboration and development (a)":

Suppose there is no floating (float) property in the CSS, then what will it look like? We will find that the current popular use of floating methods, whether it is the column layout, or list arrangement we can use some other CSS properties (regardless of table) instead of implementation, the only implementation is "text around the picture", I can't think of any way to let text around the picture display. Well, this irreplaceable role is the real meaning of float.

Sum up a word: achieve the effect of text wrapping picture.

Why does floating have text wrapping effect

The question arises mainly from the impressions of the past:

The floating element is out of the document flow.

Hey? Are you out of the flow of the document should not overlap with the non-floating elements below, why the text can also surround you?

This question has been bothering me until I see the book "Mastering CSS". The text reads:

Floating will leave the element out of the document flow and no longer affect elements that do not float. In fact, not quite so. If a floating element is followed by an element in a document flow, then the box of the element behaves as if the float does not exist at all . However, the text content of the box is affected by the floating element and moves to make room.

That is, the floating element is indeed out of the document flow, so the block box in the document flow ignores the floating element, but the text does not . This is not the same as the absolute positioning of the out-of-document flow.

The answer to Zhang Qiuyi's study also confirms this view.

Add one point: Document flow This is not accurate, in the standard, only ordinary flow (normal flow), but many domestic articles and translated books are used in the flow of documents, over time, we all use the word flow of documents.

How to clean up the impact of floating

In fact, the impact of floating is mainly

1. High collapse of the parent element resulting from the normal flow of the element
2. The non-text elements below overlap with floating elements, destroying the original layout

To clean up these effects, many people know that with the clear attribute, why does clear remove the float?

There are two ways to say it:
1. The browser adds enough margin at the top of the set clear element so that the bounding border of the element falls vertically below the margin below the floating element.
2. increase the clear space above the top margin of the clear element, and the margin itself does not change.

The former is the realization principle of CSS1 and CSS2, and the latter is the realization principle of CSS2.1. Either way, however, the floating element is left in the vertical space, which appears to clear the floating effect. Also, the space that is populated above the set clear element is actually present in the normal stream. As a result, the parent element is highly stretched.

There are many ways to clear the float. In the "floats we cleared together" in this article, the method of clearing floats is divided into two categories:

1. By adding an empty element at the end of the floating element and setting the Clear:both property, the after pseudo-element is also a block-level element that generates content as a point after the element through content;
2. Close the float by setting the parent element overflow or the Display:table property.

Almost all of the methods to clear the float can be summed up in these two categories, here in conjunction with the above blog to talk about, the method of adding pseudo-elements:

1.display:block to make the generated elements appear as block-level elements, filling up the remaining space.
2. Add a point to the content because the character is very small.
3. Set height to 0 because you do not want this new content to occupy space to destroy the layout height.
4. Set visibility to hidden so that the generated content is not visible, allowing portions of the content that may be generated to be clicked and interacted with.
Effects of 5.clear:both Cleaning floats

The code is as follows:

. clearfix:after {    display:block;    Content: ".";    height:0;    Visibility:hidden;    Clear:both;}

This approach is valid and recommended in most modern browsers. As for the other methods online there are many, here is not detailed.

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

Reference Links:

CSS Clear Property

CSS Floating

Understanding CSS floating and clearing floats

All those years we cleaned up the float

Noraml Flow

Deep research, elaboration and expansion of CSS float float (i)

Zhang Qiuyi's answer

As the front-end to write a lot of page layout, but floating this piece has been my indefinitely blind spot, on the one hand with floating can achieve a lot of layout, on the other hand, the impact of floating will damage the layout of people headaches, so today, specifically to write a blog to solve this blind spot.

This article mainly discusses the following issues:
1. Original use of the float
2. Why does floating have text wrapping effect
3. How to clean up the impact of floating

The original purpose of the float

The following is from Zhang Xin Asahi great God's "CSS float floating in-depth research, elaboration and development (a)":

Suppose there is no floating (float) property in the CSS, then what will it look like? We will find that the current popular use of floating methods, whether it is the column layout, or list arrangement we can use some other CSS properties (regardless of table) instead of implementation, the only implementation is "text around the picture", I can't think of any way to let text around the picture display. Well, this irreplaceable role is the real meaning of float.

Sum up a word: achieve the effect of text wrapping picture.

Why does floating have text wrapping effect

The question arises mainly from the impressions of the past:

The floating element is out of the document flow.

Hey? Are you out of the flow of the document should not overlap with the non-floating elements below, why the text can also surround you?

This question has been bothering me until I see the book "Mastering CSS". The text reads:

Floating will leave the element out of the document flow and no longer affect elements that do not float. In fact, not quite so. If a floating element is followed by an element in a document flow, then the box of the element behaves as if the float does not exist at all . However, the text content of the box is affected by the floating element and moves to make room.

That is, the floating element is indeed out of the document flow, so the block box in the document flow ignores the floating element, but the text does not . This is not the same as the absolute positioning of the out-of-document flow.

The answer to Zhang Qiuyi's study also confirms this view.

Add one point: Document flow This is not accurate, in the standard, only ordinary flow (normal flow), but many domestic articles and translated books are used in the flow of documents, over time, we all use the word flow of documents.

How to clean up the impact of floating

In fact, the impact of floating is mainly

1. High collapse of the parent element resulting from the normal flow of the element
2. The non-text elements below overlap with floating elements, destroying the original layout

To clean up these effects, many people know that with the clear attribute, why does clear remove the float?

There are two ways to say it:
1. The browser adds enough margin at the top of the set clear element so that the bounding border of the element falls vertically below the margin below the floating element.
2. increase the clear space above the top margin of the clear element, and the margin itself does not change.

The former is the realization principle of CSS1 and CSS2, and the latter is the realization principle of CSS2.1. Either way, however, the floating element is left in the vertical space, which appears to clear the floating effect. Also, the space that is populated above the set clear element is actually present in the normal stream. As a result, the parent element is highly stretched.

There are many ways to clear the float. In the "floats we cleared together" in this article, the method of clearing floats is divided into two categories:

1. By adding an empty element at the end of the floating element and setting the Clear:both property, the after pseudo-element is also a block-level element that generates content as a point after the element through content;
2. Close the float by setting the parent element overflow or the Display:table property.

Almost all of the methods to clear the float can be summed up in these two categories, here in conjunction with the above blog to talk about, the method of adding pseudo-elements:

1.display:block to make the generated elements appear as block-level elements, filling up the remaining space.
2. Add a point to the content because the character is very small.
3. Set height to 0 because you do not want this new content to occupy space to destroy the layout height.
4. Set visibility to hidden so that the generated content is not visible, allowing portions of the content that may be generated to be clicked and interacted with.
Effects of 5.clear:both Cleaning floats

The code is as follows:

. clearfix:after {    display:block;    Content: ".";    height:0;    Visibility:hidden;    Clear:both;}

This approach is valid and recommended in most modern browsers. As for the other methods online there are many, here is not detailed.