Clearly explain the story of float with CSS floating attributes

What is float?

Float is the positioning attribute in CSS control. We often see images surrounded by text in traditional printed products. This method is generally called "Text wrap ". In the web design, the CSS
The page element of the float attribute is like a text-enclosed image in the printed layout. Floating elements are still part of the webpage stream. This is obviously different from the absolute positioning of the page elements.
. The absolutely positioned page element is removed from the webpage stream, just as the text box in the printed layout is set to ignore page surround. Absolutely positioned elements do not
Other elements do not affect other elements, whether or not they are connected to other elements.

For example, we have set the floating attribute in the sidebar element:

# Sidebar {float: Right ;}

The fload attribute has four available values: Left and Right floating elements to their respective directions, none (default)
So that the element does not float, inherit will get the float value from the parent element.

Float usage

In addition to wrapping text around images, we must use the float attribute when designing the layout in the following format.

Float is also useful for the internal layout of the box element. For example, if we use float on the left side of the small image layout, when the image size changes
The text content will be automatically adjusted:

If we use relative positioning in external containers and use absolute positioning on the Avatar, the text will not be affected by the size of the Avatar image, the image size does not change accordingly.

Clear float

Clear is a float attribute. We should declare the above floating effect between the floating element and the non-floating element, so we need to use clear. A
The elements except float will not move up to the boundary of the float element, but will ignore floating down. As shown in the following figure.

In the preceding example, the sidebar floats to the right and is shorter than the main content area. Footer jumps up to the expected space according to the floating requirement. To solve this problem, you can go to the footer (footer)
To make the footer stay under the floating element.

# Footer {clear: Both ;}

Clear also has four optional values. The most common is both, while clearing the floating on both sides of the left and right. Left and right
Only one direction can be clearly indicated. None is the default value. It is only used to remove the specified clear value. Inherit should be the fifth value, but it is strange that IE
Not supported. Only the float on the left or right is cleared, which is rare in practice, but it is definitely useful to them.

Great collapse

When Using Float attributes, we need to note how elements with float attributes affect their parent elements.

Note: If the parent element only contains floating elements, its height will collapse to zero. If the parent element does not contain any visible background, this issue is hard to notice, but this is a very important issue.

The intuitive opposite of collapse is worse. If we specify an inappropriate height for the parent element, the following situation will occur:

When the above block-level elements are automatically expanded to adapt to floating elements, unnaturally blank line breaks will appear in the text stream between paragraphs, and there is no effective way to fix this problem. In this case, the designer will complain
More than complaints about collapse.

To prevent weird la S and cross-browser issues, collapse issues must be addressed. The effective method is to clear the floating after the floating element in the container and before the container ends.

Floating clearing technology

If you clearly know what the next element will be, you can use clear: Both; to clear the floating. This method is good, it does not need
Hack, without adding additional elements, it also has good semantics. Of course, not all things can be solved in this way. We still need to prepare different methods to clear the floating.

Empty Div Method
Is an empty Div.
We can also try to use some other elements, but div is the most commonly used, because it does not have the default style of the browser; there is no special function, and it is generally not affected by CSS
Style. This method is simply used to clear the floating, and the page has no context meaning and is ridiculed by pure semantic commentators. It is true that they are right from a strict perspective, but this is indeed effective and effective.
And no side effects.

Overflow Method
Set the overflow CSS on the parent element.
Attribute. If the overflow attribute of the parent element is set to auto or
Hidden, the parent element is automatically extended to include floating. This method has good semantics because it does not need additional elements. However, if you need to add a new Div
To use this method, there is no semantics like the empty Div method. And remember, Overflow
Property does not exist to clear the float. It may cause side effects. Be careful not to overwrite the content or trigger the unwanted scroll bar.

Simple clearing method
Here we use a smart CSS
The pseudo-selector (: After) to clear the float. Instead of setting overflow on the parent element, you only need to add an additional class similar to "Clearfix" to it. This class uses the following
CSS:

. Clearfix: After {
Content :"";
Visibility: hidden;
Display: block;
Height: 0;
Clear: both;
}

This will apply a little invisible content after the floating parent element is cleared. This is not all about the content. Some additional code is needed to adapt to the old browsers.

Different floating clearing methods are required in different situations. Take a grid with different style blocks as an example.

In order to visually link similar blocks, we need to wrap lines where necessary. Here is where the color changes. If each color group has a parent element, we can use
Overflow method or simple clearing method. Or, use oneEmpty Div Method
. If the extra parent element does not exist, you can
Try to see which method is better.

Floating Problems

Float is criticized for its weakness. Most of the vulnerabilities come from IE6 and a series of floating problems.
Bug. Although more and more designers hate IE6 and claim that they do not set CSS for IE6 separately, ie6.0 is still used by most common online users.
We still have to pay close attention to these bugs.

Push down is a phenomenon where the elements (mostly images) in a floating element are wider than the floating element itself. Most browsers render images out of the float, but the extended part does not affect other la S. IE
It will expand and float to include images, significantly affecting the layout. A common example is to push the sidebar out of the main content.

Quick correction: make sure that this is not the case for images. Use overflow: hidden to remove the excess parts.

Double margin bug
, Handling IE6
Another thing to remember is that if you set the margin (margin) in the same direction as the floating direction, the double margin bug is thrown.
Fast Correction: Set display: Inline for floating;
And don't worry, it is still a block-level element. In addition, a block-level element without the float attribute changes to an inline element after display: inline is set.
Custom width and height.

3-pixel spacing
It means that the text of the floating element will be magically kicked out 3 pixels, as if there is a strange force field around the floating element.
Same.
Quick correction: Set the width or height on the affected text.

Padding bug
, IE7
When a floating parent element contains floating child elements, the bottom margin of these child elements is ignored by the parent element, resulting in an ugly situation where the bottom edge of the child element overlaps with the bottom edge of the parent element.
Quick correction: replace it with the base padding (padding) of the parent element.

To sum up, float is an attribute that makes people happy and worrying. Using it well is something we must learn.