CSS about floating those things

believe that every beginner HTML5 of children's shoes are more or less on float float This attribute confused, let me give you a list of the characteristics of floating.

One, floating elements will be out of the document flow

What is out-of-document flow? Suppose we write on paper, each word represents an element, and we let one of those words float in place, then we say that the word is out of the original position, that is, out of the document. When we add the float property to an element, it is like the word out of the original position, no longer occupy the original position, the original position will be empty, assuming that there is a we do not set the width of the high attribute of the Div, which contains an element, div in the high attribute is not set, the high default is the content to support, When we add a floating attribute to its inner element, the element will be out of the document stream, not in the position of the div, when the height of the div is gone, which is why the float is clear.

Second, let the inline element can support the wide-height setting

We know that the inline element is not supported by the width height setting, of course we can add display:inline-block; or display:block; To enable the inline element to support the wide setting, the Float property also enables the inline element to support the height setting.

Third, let the block elements can be arranged in the same row

Block elements are exclusive lines, like Div, each block element by default is an exclusive row, which is not the size of the width of the block element is OK, so do not want to set the width can let two block elements in the same row display, unless added display:inline-block; At this point, adding a floating property to the two block elements allows them to be displayed on the same line.

Iv. width and height by default content

This is a good understanding, when adding a floating property, we do not give it a wide height, the width of the default by the contents of the inside out.

Five, When an element sets a floating property, the element moves in the direction it is set, until it touches the parent or browser edge, or the previous floating element, stops floating

float, float, float will move, Float-left: float to the left, Float-right: float to the right, float the element back to the direction you set, until it touches the previous floating element, it stops next to the previous floating element, This is also why the float property allows the block element to be displayed on the same line. When there is no floating element in front of the element, it continues to move until it touches the parent, then stops close to the parent, and if the parent does not, it is moved to the browser when it stops.

Six, the level of floating elements is higher than the level of normal block elements

When an element floats, its hierarchy is higher than the level of the block element that does not float, which is why the floating element overwrites the previous non-floating block element.

Seven, floating elements do not overwrite text or inline labels, only the border and background of elements that have element or element features, and all text or inline labels are displayed around floating elements.

CSS about floating those things