CSS Page layout Basics 3--elements Floating

1. float (float)is one of the main functions of modern web design based on CSS, it can be used to create a tired page layout, create navigation toolbars from unordered list, not to use table to create a similar form of the way and so on.
To float the element to the left or right, and to surround it with the following text, use the Float property, the value of the float property is none (non-floating), left (floats to the right), and starboard.
with the float property, floating elements are detached from the normal document flow and have a certain effect on other elements in the layout.
floats can be applied to any element.

I personally think that we can understand the floating (if there is something wrong, please correct), in the ordinary we use the block-level elements, if we put two block-level elements nested in a div, under normal circumstances, the two block-level elements from the top to the next arrangement, that is, one on the top, one in the bottom, If we want to arrange these two block-level elements in a row (in cases where the width of the two block-level elements does not add up to the width of their parent element), we can set them with the float property. Examples are as follows

<! DOCTYPE html>
Before you add a float

To add a left float:

the application of right and left is nothing different, mainly one is on the other hand, and the other one on the other. 
The above example floats to the right effect:

Effects of text wrapping:
<! DOCTYPE html>
Effect:


2, floating a fewBasic Behavior: (1) When float is not equal to none causing the element to float, the element is treated as a block-level element (Block-level), which is equivalent to setting display:block;
(2) when a text type element is floated, the width property of the element must be set, and if the width is not set, the content of the element is collapsed to the most likely minimum width. 
(3) A floating element stays within the content area containing its parent element and does not pass through the padding area. 
(4) The margin element of the floating element does not overlap. 
(5) adjacent floating elements are not allowed to overlap in the source document. 
(6) If the element floats in the same direction, each subsequent floating element must move in that direction until it touches the inner edge of the parent element or touches the preceding floating element. (This causes multiple floating elements to be clustered at the target edge)
(7) If there is not enough space for the floating element to appear side by shoulder, the second floating element will move downward until there is enough space to display it without overwriting the first floating element. 
3. rules that limit the height of the top edge of a floating element :
(1) The top part of a floating element must remain within the top edge of its parent element. 
(2) The top part of a floating element that is not contained by a block-level element cannot be higher than the preceding block-level element. 
(3) The top of a floating element cannot be higher than the previous floating element in the document source. 
4. Clear float: Clear (only for block-level elements). In some cases, we want the area of one edge of a floating element to be cleared, and subsequent elements to appear from the container's normal position, when we can use the clear property to prevent an element from appearing behind a floating element.
<! DOCTYPE Html>
Before you use clear to clear the effects of floating:


After using clear to clear the effects of floating:

CSS Page layout Basics 3--elements Floating