CSS Super Tips (5)

css| Tips 13. Clear Floating

A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond the outer range.

The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both. This method is a little far-fetched, fortunately there is still a good way to solve, see this article "How to clear floats without structural Markup" (Note: This site will soon translate this article).

The above 2 methods can solve the problem of floating out well, but what if you really need to clear the objects in the layers or layers? An easy way is to use the overflow attribute, which was originally published in Simple clearing of floats, and was widely discussed in clearance and Super simple clearing floats.

The above clear method is more suitable for you, depending on the situation, no longer discussed here. In addition to the application of Float, some excellent articles have been very clear, recommend you to read: "Floatutorial", "containing floats" and "float Layouts"

14. Horizontally centered (centering)

It's a simple trick, but it's worth saying again because I see so many novice questions asking: How is css horizontally centered? You need to define the width of the elements and define the horizontal margin, if your layout is contained in a layer (container), like this:

<!--your layout here to start-->

You can define this so that it is centered horizontally:

#wrap {
width:760px; /* Modify the width of your layer * *
margin:0 Auto;
}

But 5/win does not correctly display this definition, we use a very useful technique to solve: using the Text-align attribute. Just like this:

Body {
Text-align:center;
}
#wrap {
width:760px; /* Modify the width of your layer * *
margin:0 Auto;
Text-align:left;
}

The first body of the text-align:center; The rule defines that all elements of the body in the Ie5/win are centered (the browser simply centers the text), the second text-align:left, and the text in the #warp is left.