Getting started with CSS Float

Getting started with CSS Float

What is CSS Float?

Float is the position attribute of css. In the traditional printing layout, text can be centered around images as needed. This method is generally called "text wrap ". In the web design, the page elements that apply the float attribute of css are like the text-enclosed images in the layout. Floating elements are still part of the webpage stream. This is an obvious difference from the use of absolute positioning 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. An absolute positioning element does not affect other elements, and other elements do not affect it, regardless of whether it is connected to other elements.

Set float with CSS on an element like this:

# Sidebar {float: right ;}

The fload attribute has four available values: left and right, respectively, floating elements to their respective directions. none (the default value) prevents the elements from floating, and inherit will obtain the float value from the parent element.

Float usage

In addition to the simple text surrounding the image, floating can be used to create all webpage la s.

Float is also useful for small la s. For example, this small area in the page. If we use float on our small avatar image, the text in the box will be automatically adjusted when the image size is adjusted.

The same layout can be achieved by using relative positioning for external containers, and then using absolute positioning for the Avatar. In this mode, the text will not be affected by the size of the avatar image and will not change accordingly with the size of the avatar image.

Clear float

Clear is a float attribute. An element with float cleared 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 clear the float on the footer so that the footer stays below the floating element.

# Footer {clear: both ;}

Clear also has four possible values. The most common one is both, which is clear about the floating on both sides. Left and right can only be clear in one direction. 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 does not support it (this is not surprising, IE has always been so maverick ). Only the float on the left or right is cleared, which is rare in practice, but it is definitely useful to them.

Great Collapse

One of the more confusing ways to use float is how they affect the inclusion of their parent element. 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. Let's look at the following situation:

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, designers complain more than collapse (not understanding, isn't it necessary to code the page after the design is complete ?).

To prevent weird la S and cross-browser issues, collapse is almost always handled. After the floating element in the container is completed, the floating element is cleared 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 very good. It does not require hack, and does not add additional elements, which also gives it good semantics. Of course, things can not all be solved in this way. In the toolbox, there are several other tools to clear the floating.

The empty div method is an empty div. Sometimes some other elements may be used, 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 converted into css styles. This method is simply used to show that 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 method is effective and has no harm.

The overflow method sets the css attribute of overflow on the parent element. If this attribute of the parent element is set to auto or hidden, the parent element will be 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. Remember that the overflow attribute is not defined to clear the float. Be careful not to overwrite the content or trigger unwanted scroll bars.

The simple cleanup method uses a clever css 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.

To visually associate similar blocks, you need to enable a new line where necessary. Here is where the color changes. If each color group has a parent element, you can use overflow or simply clear it. Alternatively, use an empty div method between each group. The extra div does not exist before. 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-related bugs. Because more and more designers no longer support IE6, you can ignore it. But for those who want to pay attention to it, here is a bit rough.

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 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.

When the double margin bug is used to handle IE6, another thing to remember is that if you set the outer margin (margin) in the same direction as the floating direction, double margins will be raised. Fast correction: set display: inline for floating; and don't worry, it is still a block-level element.

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

In IE7, the bottom margin bug is that when the floating parent element has floating child elements, the bottom margin of these child elements will be ignored by the parent element. Quick correction: replace it with the base padding (padding) of the parent element.