CSS three ways to get elements out of the standard this document flow

1. Floating

Floating is one of the most used options in CSS, and he has three properties. About floating we want to emphasize a little, never a thing alone floating, floating are all floating together, to float, we all float.

1.1 Floating elements out of standard document flow

1.1.1 Approximate Description: There are two boxes, one box floats, one box does not float. Floating boxes are separated from the standard document flow, and non-floating boxes become the first in the standard document flow, so they are covered.

　　　　

1.1.2 Description: An inline label cannot be set to a wide height in a standard document flow, but when you use float to leave it out of the document flow, you can set it to a wide height. All floating labels do not differentiate between inline labels and block-level labels. In other words: Once an element floats, it will be able to side-by, and can be set to a wide height. Whether it turns out to be a div or a span.

1.2 Floating elements Snap to each other

Take float to left float for example:

If there is enough space, then you will rely on 2 elder brother. If there is not enough space, then you will rely on Big Brother number 1.

If there is not enough space against the number 1 brother, to stick to the left wall.

　　　　

1.3 Floating elements have a " self-enclosing " effect

The self-surround effect is that a floating box can cover the first box of a document's standard flow, but it won't obscure the text inside, and the text will appear around the floating box.

In the CSS code to let the div floating, p does not float, then the text in P will sleep to form this self-surrounding effect.

<Div>    <imgsrc= "Images/1.jpg"alt="" /></Div><P>123 literal text text text text text text text text text text text text text text literal text literal text text literal text text literal text text text literal text text text literal text text literal text text literal text text text text  Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Word, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Word text text</P>

　　　　

2. Absolute positioning

3. Fixed positioning

4, father-child relationship: The son is occupied father content of the wide, and father's padding no relationship.

CSS three ways to get elements out of the standard this document flow