html / css float floating in Usage

A, float Basic Usage Examples
1, we first build two div boxes, set the height, width and background color;

 

Initially two boxes position on the page as follows:

 

 We will then float to the right of the red box

 

 Then we will find a red box floated to the right, but directly on the blue box moved to the position of the original red box.

Then we will be floating blue box to the right to see results:

We will find that it is followed by a red box arrangement, and is not affected by block-level elements affect a separate line.

 

 

Second, the basic rules of the float position
1, when the float attribute value of the element is left or right, an element belonging to float position;
2, if the remaining space can not float down box, the box is moved downward, until sufficient space is provided to accommodate the box, and then moved left or right;
3, the top edge of the box can not be floating above the top side of a box;
4, when placed in a floating box, to avoid the conventional flow box; normal flow when placed in the box, ignoring the floating box;
5, the height of a conventional automatic cassette flow calculation, ignoring the floating box
6, clear float: clear: both (left or right).

 

 

 

 

 

Guess you like

Origin www.cnblogs.com/qxz17760485467/p/11484162.html