CSS floating notation

This chapter mainly records positioning and floating commonly used.

1. Floating

When it comes to floats, let's talk about standard and floating flows.

1. Standard Flow

Standard streams are common, and the default way for browsers is standard streaming.
How does the standard flow understand it?
Implementation we need to know three types of elements in the CSS category.

Inline elements, block-level elements, inline block-level elements

Inline

in-line elements	block-level elements	block-level elements
Do not monopolize a row	Exclusive row	Do not monopolize a row
The default is as wide as the content	The default is the same width as the parent element	Default and Content
Can not set width height	You can set the width height	You can set the width height

The difference between about three elements comes out.
Insert another point of knowledge here:
In HTML, elements (tags) are usually divided into two categories:

container-level labels	text-level labels
P h ul ol Li DT etc.	Span/p/em/ins, etc.
All other tags can be nested	Only text/images/hyperlinks can be nested

Now we can talk about the standard flow:

There are two ways of typesetting in the standard stream, block-level elements according to vertical layout, inline elements and inline block level according to the horizontal layout, along the

2. Floating Stream

Properties of the float:

Clear	Clear	float	Floating
Left/right	Left/right do not allow floating	Left/right	Left float/Right float
Both/none	Cannot/does not clear	None	Do not float

There are a few things to note about floating:

Floating is the setting of the floating elements will float around him!!!

For example, right means that the following element will be on his left!!!

Floating flow does not distinguish what elements, can only be horizontal layout, no center (center), can not use margin:0 auto, you can set the width of the high.

Characteristics
The front one floats behind a no, then the front one will cover the back one (the text will not cover, will surround around), here can try to think of the floating arrangement of the scene.
First float will be in front, after floating will be in the back
The position after the float is determined by the position of the float before it is in the standard flow, which is primarily understood as what elements will be affected after floating.
Left float will go to find left float, right float will follow right float behind
When the parent element width can display all floats, display
Floating snapping mainly refers to when the parent element width is not enough to lean forward, how to understand, that is, if you have a window put a lot of pictures to reduce the window width when the picture will automatically down the phenomenon