CSS Layout Series-float floating

Ready to talk about a layout series, first of all, to explain some basic attribute theory, in the case of combining with the theory, strive to speak clearly. Welcome to discuss together, learn to fight together. Talk less, first go to the official website to see how to explain the definition of float float.

Official definition:

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element. If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible. If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.

Looking at some of these definitions indefinitely, if really in use, there are still some do not understand the place. The official definition of the current summary of his characteristics:

• Floating is mainly changing the direction of the element arrangement, out of the normal flow. The value range is left, right, none (not floating);
• Floating does not occupy the position of the document, if it overlaps with non-floating block-level elements, the floating element will be the topmost layer, which is the top layer;
• If the specified element is floating, the element will have the Inner-block attribute and the width will become as narrow as possible, it is recommended to specify a width;
• After you specify the direction of the floating element, the floating element will stop floating when it touches the parent element's border, or the border of another floating element will also stop floating;
• If a floating element is specified, subsequent non-floating block-level elements are immediately behind the floating element, and the width of the element is automatically populated;
• If there is only a small amount of space available to float on a line, then this element jumps to the next line, which continues until a row has enough space (too late for verification today).

Supplemental Note: The normal flow (also known as the standard flow) specifies that elements are arranged from left to right, top to bottom.

Below we through the example to verify each, of course, do not rule out in some special circumstances, my summary is not established, but I did not think of it.

1. This is not a waste of time;
2. Set Div1 to the left, you can see that he overlaps with the div2 element, and Div1 on the top, and also verify that it is not occupying any space, and that the element is set to absolute positioning and z-index effect is the same, but not exactly the same, you can see the div2 text is not covered. What a elusive float!

3. Remove the high width of the div1, he will be based on your text width self-supporting, if not give a high width can have how narrow, in fact, with the element set to Inner-block and do not set a high width effect is self-supporting, the subsequent introduction of this property. In a sense, it is a good idea to set elements floating and inline blocks, except that floats can change the direction of the elements.

4. Set Div1 div2 two elements float to the left, according to my summary, if the floating element touches the border of the parent element or touches another floating element border stops floating. Div1 is to touch the parent element container border, Div2 is encountered div1 the border stop floating, if suspect there is a problem, should be div2 element is to overwrite the elements of Div1, but no, prove that I generalize is correct.

5. Set the DIV1 element to the left, according to my summary, if you specify a floating element, subsequent non-floating block-level elements follow the floating element, and the width of the element is automatically populated. In fact, the width of the div2 is 100%, DIV1 is floating on the div2 element above. As mentioned above, floating elements do not occupy any space in the document.

CSS Layout Series-float floating