This is the fourth day of my participation in Gwen Challenge

Float is a strange property that gives us a new way to layout our web pages, and it also raises some questions to understand from an application and principle point of view

What is floating

Historical origins of floating defects

Float is famous for height collapse, which can affect normal layout, but this is not really a bug. For float, the original purpose was just to create a text surround, and the height collapse was just to create a text surround. But CSS designers were surprised by the way that text-wrap became obsolete, and float was rarely used for its original purpose, instead being used for layout. Obviously, you don’t need the parent element to collapse, so this is a pit to watch out for when using float layouts.

The action mechanism of floating

“More” is just to follow the contents of the can and the floating element in a level, but this is just one of the conditions of “surround effect”, to achieve real “surround effect”, you need to another at ordinary times you don’t pay too much attention to characteristics, that is * * “line box, box and the floating element overlaps” * *, That is, “If the vertical height of the row box overlaps with that of the floating element, the row box will only follow the floating element in its normal position and will not overlap.”

Notice that I’m talking about the “line box,” the box where each inline element is located, not the outer block box. In fact, due to the collapse of the floating elements, the blocky box is completely superimposed on the image.

In order to create a wrap effect, float elements are removed from the normal flow of the document, and naturally the lower block-level elements float up and overlap with the float elements. At this point, the use of the line box box and floating elements of non-overlapping characteristics, to achieve the text around the effect.

Floating flaw

A common drawback of an element that is set to float (that is, float is left, right, or inherit and inherits the left or right value from the parent element) is that it affects the position of its sibling elements and the parent element causes a high collapse.

The effect on sibling elements also depends on whether the elements are block-level or inline. If block-level elements will ignore the floating block box, which is the effect we see at ordinary times, make to itself with the floating element in the same line as far as possible, cause is covered by floating elements, unless these div set the width, and the width of the parent element to contain them, so sibling elements would be forced to break; If the element is inline, it surrounds the floating element as much as possible.

In addition, the floating element is separated from the normal flow, and the parent element that contains it will not be pushed up by the floating element, but will collapse to the bottom

Obviously, whether affect the sibling elements or highly subsidence problems, are not we use the purpose of the floating, floating, just in order to change the layout of an element, but the end result is more unnecessary influence, this is not conducive to the layout, so we need to remove these additional effects, which is to remove the floating, in fact, more accurately, Is to remove the additional effects of floating.

The limitation on line boxes is deeply rooted, and without changing the current layout, we can’t change the size of this area by changing the current CSS properties, which is why the negative infinity margin element behind the floating element still doesn’t work (only the block box gets bigger at this point).

What is clear float

Clear the float, clear the float of the additional effects

Common ways to clear floats

Set the clear: Both clear adds enough white space to an element so that its position is placed below the floating element before it. This is the same effect as forcing a line break by increasing the element margin so that the element fills the line. In fact, in CSS1 and CSS2, Clearing float is done by automatically adding margins to the clear element (that is, the element with the clear attribute set). Since there is enough space to wrap the element, it is safest to make the element occupy the entire line.

The float is now cleared, but this only clears the effect of the float on sibling elements, and the height collapse problem is not solved, so we need a higher level of clear float — closed float.

Why is it called closed float? Because the floating element is separated from the normal stream, it is not closed for its parent element, which is where the closed float is needed.

An empty div method

This is an older method, and there are other tags besides div, but div is better because it has no style other than the display: block that the browser gives it, and it doesn’t do anything special. Here’s an aside, display: Block is what the browser gives the div, it’s in the user agent stylesheet of the browser, it’s not the default display value of the div is block, and in W3C, The default value of all HTML tags display is inline.

<div class="box">
    <div class="main left">I set the left float: left</div>
    <div style="clear: both;"></div>
    <div class="aside">I'm the footer, and I've added an empty div with clear: both set to the top</div>
</div>
Copy the code

The empty div method is convenient, but adding a div with no meaning violates the principle of separation of structure and presentation, and makes later maintenance inconvenient.

The overflow method sets the overflow value to hidden or auto on the parent element of the float element, which can close the float. In IE6 you also need to trigger hasLayout, such as setting the container width for the parent element or setting Zoom: 1

<div class="box" style="overflow: hidden; *zoom: 1;">
    <div class="main left">I set the left float: left</div>
    <div class="aside left">I'm the footer, but I also set the left float.</div>
</div>
Copy the code

This method is more convenient than the former and more semantically satisfying. However, overflow is not designed for closed float, so when an element contains child elements that go beyond the parent element boundary, it may overwrite useful child elements or produce redundant scroll bars. This is why it is still necessary to find a better approach even after the overflow approach was born.

This method is derived from PositionIseverything, combined with: After pseudo-element (note that this is not a pseudo-class, but a pseudo-element, which represents the most recent element after an element) and IEhack. It is perfectly compatible with all major browsers. IEhack refers to triggering hasLayout, as shown below.

<style>
    .clearfix {/* Trigger hasLayout */ zoom: 1; }
    .clearfix:after {content: &quot; .&quot;;display: block; height: 0; clear: both; visibility: hidden; }
</style>
    <div class="main left">I set the left float: left</div>
    <div class="aside left">I'm the footer, but I also set the left float.</div>
</div>
Copy the code

Obviously, this approach is relatively compatible with mainstream browsers, but it is also relatively convenient, with reusable classes that reduce coding, and the structure of the page is clearer.

Clear the essence of the float method – CSS Clear and BFC features

From the above example, it is not difficult to see that the methods for clearing floats can be divided into two categories:

One is to use the clear attribute, including adding an empty div with the clear: both attribute at the end of the floating element to close the element. In fact, the method of using the :after pseudo-element is also to add an element with the clear: both attribute at the end of the element.

Trigger the BFC (Block Formatting Context) of the floating element’s parent so that it can contain the floating element.

BFC plays a very important role in the Visual Formatting Model of CSS, and many developers have many puzzling problems in actual development because they do not understand the characteristics of BFC.

The above! Last rule, post my blog, welcome to follow

Resources details clearing floats

Please pay attention to the official number: Full stack flying Squadron