Document flow float clear and layout in css_html/css_WEB-ITnose

Document flow

Let’s first talk about what a document flow is. What a flow is is a series of continuous things

 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div>  <div style="background-color:red;width:40px;height:80px;">第二个框 </div>  <div style="background-color:yellow;width:40px;height:80px;">第三个框 </div>  <span>我换行</span>  <span>我不换行</span>

The element system we write in html will be read sequentially in the data stream and placed on the page in order from left to right, top to bottom

Of course during the placement process It involves the concepts of inline elements and block-level elements

A brief explanation

Block-level elements: such as div. Each div element occupies one line. If the width is not set, the entire line will be filled by default. If specified Even if the width is smaller, the following elements must be placed on a new line

Inline elements: span will not wrap. For example, if A is an inline element, the elements following it will be placed to the right of A instead of below

Floating

After talking about document flow, let’s talk about floating

In the above example, the three divs are block-level elements, each occupying one line. But the problem is I just want their layout to be as follows

Look at the code first

  <div style="background-color:pink;width:40px;height:80px;float:left;"></div>  <div style="background-color:red;width:80px;height:80px;"></div>  <div style="background-color:yellow;width:40px;height:80px;">	</div>  <span>我换行</span>  <span>我不换行</span>

You see, there is an extra float: left in the first line of code

What it means is to let this element escape the constraints of the document flow and "float" it to the leftmost side of the container that wraps it (at this time it no longer exists in the document flow)

Looking now The width parameters of those three divs. The width of the dark red is 80. We only see the 40 pixels on the right. The 40 pixels on the left are blocked by the pink div outside the document flow.

The code for this picture is as follows

	<div style="float:left;background-color:pink">			<span>dd</span>			<select name="general.language">					<option value="volo">Volvo</option>					<option value="saab">Saab</option>					<option value="fiat">Fiat</option>					<option value="audi">Audi</option>			</select>	</div>	<div style="background-color:blue">LLL </div>	<div style="background-color:green">  asdf</div>	<div style="background-color:yellow;">	ddddd</div>	<div>	eeee	</div>

If you are using Chrome browser to open the inspection element, you will see

It is actually blue 111div is placed from the top row. The pink div is placed on top of it to block part of it

(lll asdf. The same piece of code is printed in the center. The display is different in editplus and chrome. It should be due to different explanation mechanisms. )

This is also in line with the theory of document flow we talked about above: any element with a float attribute will be taken out of the document flow, and the elements inside the document flow will be placed where they should be

But the problem is, can’t I also write the top line of asdf?

This involves the detailed layout method of float. Let me tell you one sentence

If a div element A is floating. If the previous element of the A element is also floating, then the A element will follow the previous element (if these two elements cannot be placed on one line, then the A element will be squeezed to the next line); if the A element If the previous element is an element in the standard flow, then the relative vertical position of A will not change, that is to say, the top of A will always be aligned with the bottom of the previous element.

The order of divs is determined by the order of divs in the HTML code.

The end close to the edge of the page is the front, and the end far away from the edge of the page is the back.

Then there is another question. What if a itself is not floating? This is a bit of a puzzle. If a is not floating, then it is still in the document flow! This is the description of the big red block in the picture below. The truth

If you still don’t understand, type a few lines of code yourself and see the effect

Analyze that the front element of our page LLL has a floating label, so place the LLL to the right of the front element

The previous element of asdf is LLL, so asdf is placed directly below the LLL, which is the effect in our picture

What should I do?

clear

clear : none | left | right | both
Value:
none : Default value. Floating objects are allowed on both sides
left : Floating objects are not allowed on the left
right : Floating objects are not allowed on the right
both : Floating objects are not allowed

clear itself It is to clear the floating effect of the element itself

We add clear:left to asdf and it will be ok

Recommended information

(The article below is far better than mine and my information basically comes from here. You must read it)

http://www.cnblogs.com/iyangyuan/archive /2013/03/27/2983813.html#undefined