css float rule

css float

Before explaining the rules of floating, floating speak about why you need it.
The HTML tags can be divided into block elements and inline elements. Massive exclusive elements in the page display in a row, you can define the width and height, like this:

but inline elements can be displayed side by side,

so if you want to achieve massive elements like inline elements, like can be displayed side by side, then you need to set up a floating element Attributes.
Floating can cancel the standard flow mode, so massive elements can be displayed side by side.

Written in the floating css:
selector {float: Property Value;}

Floating property values
left: left-floating;
right: right-floating;
none: Cancel float;
the inherit: inherit the parent element of the float property;

After the effect of addition of floating

Rules float property

A rule: the outer left and right boundaries of the floating element can not exceed the boundary of a block comprising the left and right.
Rule 2: floating elements do not overlap.
Rule three: floating the HTML tag sequence and the sequence related to the writing.
Rule four: Adding the floating element, no longer occupies the position of the standard document flow, the upward movement of the rear element will fill bits. Figure:

Rule 5: If you display multiple elements side by side required, then these elements need to set up a floating, otherwise there will be following this situation, as shown:

1 is not provided a floating, floating right set 2, it does not show visible after floating in a row.

Rule six: left or floating object will float until it encounters a boundary, padding, margin, border or another element position to the right.
Rule Seven: container width is not enough, add a floating element will go to the next line, as shown:

Rule Eight: After adding the float property, margin: 0 auto; it no longer works.

Attachment:

Using the float property can make a simple navigation:

<style type="text/css">
			li{list-style: none;}
			a{text-decoration: none;}
			.nav {
				width: 1080px;
			}
			.nav li{
				width: 137px;
				height: 50px;
				float: left;
				font-size: 16px;
				line-height:52px ;
				text-align: center;
				background: #6ba9ef;
			}
			.nav li a{
				color: #134680;
		</style>

Renderings: