Css float, css float

Css float, css float
Standard Document Stream

The form is divided into rows from top to bottom, and the elements are discharged from left to right in each row, that is, the document stream. each non-floating block-level element occupies only one row, and the floating element floats at one end of the row as required. if the current row cannot accommodate it, a new row will be floated.

Microscopic phenomena of standard streams

Blank collapse

The same is true for images and form elements.

Height not straight, bottom alignment

Automatic line feed. One line cannot be written. line feed is written.

 

Block-level elements and intra-Row Element block-level elements

Occupies a row and cannot be tied with any other element

You can set the width and height. If the width is not set, the width is changed to 100% of the parent by default.

Line Element

Side by side with other row Elements

Width and height cannot be set. The default width is the text width.

Label Classification

In HTML, tags can be divided into text-level and container-level.

Text level: p, span, a, B, I, u, em

Container level: div, h series, li, dt, dd

The classification of CSS is similar to the preceding one, so p is different:

All text-level labels are intra-row elements, except p and p are text-level but block-level elements.

All container-level labels are block-level elements.

Mutual conversion between block-level elements and intra-row Elements

Block-level elements can be set to intra-row elements, and intra-row elements can be set to block-level elements.

Display: inline;/* convert block-level elements into intra-row elements */

Once a div is set to display: inline, The div cannot be set to width or height. Then, the div will immediately become an element in the row. In this case, it is the same as a span, and this div can be side by side with other labels.

Display: block;/* convert in-row elements to block-level elements */

Once a span is set to display: block, the span becomes a block-level element. In this case, the label is the same as a div. In this case, the width and height of the span can be set. In this case, the span must occupy a line, and other people cannot side with it. If the width is not set, it will fill my father.

Display: inline-block;/* the elements can be side by side, and the width and height can be set */

The standard document stream cannot be laid out, so elements need to be separated from the document stream. There are three methods in css to separate an element from the standard Document Stream:

Floating

Three floating Properties

Floating elements exit the standard Document Stream

<Style type = "text/css">. div1 {float: left; width: 100px; height: 100px; background-color: red ;}. div2 {width: 150px; height: 150px; background-color: green ;} </style> <div class = "div1"> I am div1 </div> <div class = "div2"> I am div2 </div>

The effect is as follows: After div1 floats, it is out of the standard Document Stream. div2 is the first box in the standard Document Stream, so it is rendered at the top left of the page.

 

After floating, a span tag can be set to width and height without being converted to block-level elements. So one thing that can be proved is that all labels are no longer in-row or block. That is to say, once an element floats, it will be able to side by side and set the width and height. Whether it is a div or a span. Refer to the first floating chart.

Floating elements attach to each other

<style type="text/css">body{font-size: 60px;}.div1{float: left;width: 100px;height: 100px;background-color: red;}.div2{float: left;width: 150px;height: 150px;background-color: green;}.div3{float: left;width: 200px;height: 200px;background-color: blue;}</style><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div>

 

If there is sufficient space, div3 relies on div2. If there is not enough space, div3 will rely on div1. If there is not enough space to rely on div1, paste it to the left of the page.

Floating elements have a word circle Effect

<Style type = "text/css"> div {float: left; width: 320px; height: 320px; background-color: orange ;} </style> 
　　
Div blocks p, but the text in p is not blocked, forming a "word circle" effect.

 
This article is not original, it is purely a study note