CSS Floating Property Float What the hell is going on, here's a detailed explanation

float is the positioning property of the CSS . In a traditional print layout, the text can be centered around the picture as needed. This is generally referred to as "text wrapping." In web design, a page element that applies the float property of CSS is like a picture surrounded by text in a printed layout. The floating element is still part of the page flow. This is a distinct difference from page elements that use absolute positioning. Absolutely positioned page elements are removed from the page stream, just as the text boxes inside the print layout are set to ignore page wrapping. An absolutely positioned element does not affect other elements, nor does the other element affect it, regardless of whether it is adjacent to other elements.

Use CSS to set floats on an element like this:

#sidebar { float: right; }

The Fload property has four values available: left and right float elements in their respective directions, None (the default) causes the element to not float, and Inherit will get the float value from the parent element.

The use of float

In addition to simply wrapping text around a picture, floating can be used to create all page layouts.

Float is also useful for small layouts. For example, this small area of the page. If we use float on our little avatar image, the text in the box will automatically adjust to the position when the image size is resized:

The same layout can be achieved by using relative positioning in the outer container and then using absolute positioning on the avatar. In this way, the text is not affected by the size of the avatar image, and does not change depending on the size of the avatar image.

Clear float

Clear is a related property of float (float). An element that is set to clear float does not move upward to the boundary of the float element, as set by float, but instead ignores the floating downward movement. As below, a picture of the top thousand words.

In the example above, the sidebar floats to the right and is shorter than the main content area. The footer (footer) then jumps up to the possible space as required by the float. To resolve this problem, you can clear the float on the footer (footer) so that the footer (footer) stays below the floating element.

#footer { clear: both; }

The purge (clear) also has 4 possible values. The most common is the both, clear the left and right sides of the float. Left and right can only clear One direction of the float. None is the default value and is used only if you need to remove the specified purge value. Inherit should be the fifth value, but it is very strange that IE does not support (this is not surprising, IE has always been so maverick-sugar with tomato note). Only the left or right floats are cleared, but they are seldom seen in practice, but they are absolutely useful.

The great collapse

One of the more puzzling things about using float (float) is how they affect the parent element that contains them. If the parent element contains only floating elements, its height collapses to zero. This problem can be difficult to notice if the parent element does not contain any visible backgrounds, but this is a very important issue.

The visual opposite of collapse is worse, look at the following situation:

When the block-level elements above are automatically extended to accommodate floating elements, unnatural whitespace wrapping occurs in the text flow between paragraphs, and there is no effective way to correct the problem. In this case, the designer will complain more than the collapse of the complaint (do not understand, not the design is completed before the page encoding? -Sugar companion tomatoes).

To prevent weird layouts and cross-browser problems, the collapse problem is almost always handled. After we float the element in the container, the container ends before it clears the float.

Technology to clear floating

If you know exactly what the next element will be, you can use Clear:both; To clear the float. This method is very good, it does not need to hack, does not add the additional element also makes it has the good semantics. Of course things don't all work out like this, and there are several other tools that need to be cleaned up in the toolbox.

• The empty div method literally, is an empty div.
  。 Sometimes it may be used
  or some other element, but the div is the most common because it has no browser default style, no special features, and is generally not styled by CSS. This method is ridiculed by pure semantics because it is only for performance and has no contextual meaning to the page. Admittedly, they're right from a strict point of view, but this approach works and doesn't hurt.
• The overflow method sets the overflow CSS property on the parent element. If this property of the parent element is set to auto or hidden, the parent element expands to include the float. This method has good semantics because he doesn't need extra elements. However, if you need to add a new div to use this method, in fact, the empty Div method is just like no semantics. Also remember that the overflow property is not defined to clear the float. Be careful not to overwrite the content or trigger unwanted scroll bars.
• The simple Purge method uses a smart CSS pseudo-selector (: After) to clear the float. Rather than setting overflow on the parent element, just add an extra class like "Clearfix" to it. This class uses the following CSS:

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

  This applies a bit of invisible content after clearing the floating parent element. This is not all , and some extra code is needed to accommodate the older browsers.

Different situations require a different floating purge method. Take a grid with a different style block as an example.

In order to visually better link similar blocks, you need to open new lines where necessary, here is where the color changes. If each color group has a parent element, we can use overflow or a simple cleanup method. Or, use an empty div method between each group. The extra div doesn't exist before, so you can try it yourself to see which method is good.

Floating problem

The float has been criticised for its fragility. Most of the vulnerabilities come from IE6 and a series of floating-related bugs. Because more and more designers no longer support IE6, you can not pay attention to it. But for those who want to pay attention, here are some.

• tearing is a phenomenon in which elements within a floating element (mostly pictures) are wider than the floating elements themselves. Most browsers render pictures outside of the float, but there are no protruding parts that affect other layouts. IE expands the float to include the picture, which greatly affects the layout. A common example is to break out of the main content and push the sidebar below.
• Quick Fix : Make sure the picture is not the case and use Overflow:hidden to remove the extra parts.
• double margin Bug when dealing with IE6, another thing to remember is that if you set margin (margin) in the same direction as the floating direction, double margins are raised. Quick fix: Give floating set display:inline; And don't worry, it's still a block-level element.
• 3 pixel spacing is the text that is next to the floating element that magically kicks out 3 pixels, like a strange force field around a floating element. Quick FIX: Set the width or height on the affected text.
• IE7, the bottom margin bug is that when a floating parent element has a floating child element, the bottom margin of those child elements is ignored by the parent element. Quick FIX: Replace with parent element's bottom padding (padding).

English original: All aboutfloats

CSS Floating Property Float What the hell is going on, here's a detailed explanation