[CSS] CSS Floating float detailed (i): Standard document Flow

The production of Web pages, is a stream, must go from top to bottom. Standard document Flow

The flow of metaphor is very image, like the current, must be from the top down, like knitting sweater.
So what exactly is a standard document stream? In the Web, standard document flow has several features:

uneven height, alignment of the bottom

Wrap Line
Regardless of the size of the font, how high the picture is, the bottom is always aligned, and the line wraps automatically.

Blank folding Phenomenon

<p> My name is Feathers                                         learning </span>!  Learning makes me happy! Life is learning. It's hard to learn a moment without learning. </p>

This code is the source code for the document in the top picture, and we see that no matter how many spaces or returns we enter in the document, it will be folded into a space, which is called a blank folding phenomenon. text-level labels and container-level labels

HTML divides HTML tags into two classes, text-level and container-level . Specify the role of the label, text-level labels can only hold text, and container-level labels to accommodate other containers, you can hold text.

Note: text is more than just words, pictures, links, etc. are text. Therefore, the IMG tag is neither a text-level label nor a container-level label. Just use the label form to represent the picture.

Text-level tags are: Span,p,u,i,em,strong ...
Container-level labels are: Div,h,li,dt,dd ... block-level elements and inline elements

CSS divides HTML elements into two blocks of block-level elements and inline elements . By display:inline/block The default style to the element, the main difference is that the block-level elements occupy the entire row, while the width of the elements in the row will only wrap the content.

Element elements in the row cannot be set wide and high, and cannot be set in width or height. The default width is the width of the text. Common inline elements are: Span,u,i,em,strong ...

Block-level elements occupy a row and cannot be tied to any other element to accept wide, high if you do not set the width, then the width will default to the parent container 100%. If you do not set the height, then the height defaults to the package content, or the container of the child will be the height of the container to prop up the common block-level elements are: P,div,h,li,dt,dd ... Note that although P is a text-level element, it is a block-level element.

conversion between block-level elements and inline elements

Because there are various characteristics between the elements and block-level elements, each has its own expression effect. Typically, we might want to set a width and height for the span label, and let the div tag side-by, and then use the element type conversion.

We can set the type of the element by Display:block/inline to achieve the desired effect.