Float clear and layout in the document flow CSS

Document Flow

First of all, what is a document flow is a sequence of things.

<div style= "background-color:pink;width:40px;height:80px;" > First box </div>  <div style= "background-color:red;width:40px;height:80px;" > Second box </div>  <div style= "background-color:yellow;width:40px;height:80px;" > Third box </div>  <span> i wrap </span>  <span> I don't break a line </span>

The elements that we write in HTML are placed in the data stream and then read sequentially from left to right on the page.

Of course, the concept of inline elements and block-level elements is involved in the placement process.

Simply explain

Block-level elements: such as Div each div element occupies a row if the width is not set, the default is to fill the entire row if the width is specified, even if the width is smaller, the element that follows it has to be placed on another line.

Inline elements: such as span does not wrap for example, A is an element behind an inline element that is placed on the right side of a and not below.

Float said the flow of the document stream say floating in the above example three Div is a block-level element one row, but the problem is I just want to let them layout the following how to do

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> I wrap </span>  <span> I don't break the line </span>

You see, in the first line of code, there's one more float:left.

What it means is to let this element out of the limits of the flow of the document and "float" it to the far left of the container that wraps him (there is no such thing in the document flow)

Now look at the width of the three div parameter the depth of the red width is 80 we only see the right side of the 40 left 40 pixels are blocked by the pink Div outside the document stream

The code for this diagram 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 use Chrome's browser to open the review element you will see

In fact, the blue 111div is placed from the top row of the pink div placed above it blocked part of the

(LLL asdf Center Print the same piece of code in the EditPlus and chrome display is not the same as the mechanism of explanation is different it)

This is also in line with the theory of the flow of the document we're talking about: which element has the float attribute and takes him out of the document stream, and the elements inside the document flow are placed where they should be.

But the question is, do I want asdf to write the top line?

This involves the detailed layout of the float to tell you a word

if a DIV element A is floating, if the previous element of a element is also floating, the A element will follow the previous element's after Edge (if one row cannot fit the two elements, the a element is squeezed to the next line), and if the element of a element is an element in the standard flow, the relative vertical position of a is not changed, meaning that the top of a is always aligned with the bottom of the previous element.

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

         near the edge of the page is front after

There is another problem, if a itself is not floating it? If a is not floating, then it is still in the flow of the document! That's the big red color of the picture below.

If you still do not understand, knock yourself a few lines of code, see the effect is OK

Analyze our page lll The front element has a floating label and put the LLL on the right side 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 diagram.

So what?

Clear

Clear:none | Left | Right | Both
Value:
None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed

Clear itself is the removal of the floating effect of the element itself.

We'll add Clear:left on the asdf.

Information recommendation (The following article is written far better than mine my information is basically from here everyone must see) http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html#undefined

Float clear and layout in the document flow CSS