What is the document flow in the CSS floating-css?

Original link: http://www.cnblogs.com/jiqing9006/archive/2012/07/30/2615231.html

Ordinary flow is normal document flow, in the HTML is written in from top to bottom, from left to right layout.

Cases:

<div id= "></div><div id=" ></div><div></div>

It is obvious that this is the most common document flow, from left to right, one by one in order 01 first, 02 second, and 03 in the final arrangement.

Once a div is given a float property or absolute positioning (excluding static/relative, both of which still maintain a normal flow of documents), it is completely out of the document flow and does not occupy space.

Cases:

In order to be able to identify better, I gave 01 green, 02 Gray, 03 yellow respectively. And then give 01 left to float. As a result, 01 is out of the document stream, completely free of space, so 02 has replaced 01 of the original position, the result 02 was covered by 01.

Similarly, absolute positioning, like float, is out of the document stream and no longer occupies the original document flow. To give a confirmation--highly adaptive--of the problems that we often encounter everyday

Think again and again, the highly adaptive principle is actually this:

<div id= "A" ><div id= "B" > This is B</div><div id= "C" > This is c</div></div>

This structure is a pack B and C, the color does not change, A's height is automatic, B's height is 100,c height of 500. Both B and C are left-floating.

It was obvious that a was not being stretched. The reason is that they no longer occupy space when they float. Since there is no space to occupy, it is equal to nothing in the container, so do not open. The workaround is to add a div behind the yellow div and clear the float. Let him have the space to occupy, the nature is open. Give it a try!

The effect after removal:

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

CSS Floating

See, when you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box:

Again, when Box 1 floats to the left, it is out of the document stream and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, actually covers box 2, so that box 2 disappears from view.

If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until you hit the previous float box.

As shown, if the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, then they may be "stuck" by other floating elements when they move down:

Line boxes and cleanup

The row box next to the float box is shortened to make room for the floating box, and the row box surrounds the float box.

Therefore, creating a floating box allows the text to surround the image:

To prevent a row box from wrapping around a floating box, you need to apply the clear property to the box. The value of the clear property can be left, right, both, or none, which indicates which sides of the box should not be next to the floating box.

To achieve this effect, add enough space on the top margin of the element to be cleaned so that the topmost edge of the element drops vertically below the floating box:

This is a useful tool that allows the surrounding elements to make room for floating elements.

Let's look at floats and cleanup in more detail. Suppose you want to float a picture to the left of a block of text, and you want the picture and text to be contained in another element with a background color and border. You might write the following code:

. news {  Background-color:gray;  Border:solid 1px black;  }. News img {  float:left;  }. News p {  float:right;  } <div class= "News" ><p>some text</p></div>

In this case, there is a problem. Because the floating element is out of the document flow, the div that surrounds the picture and text does not occupy space.

How can surround elements visually surround floating elements? You need to apply clear somewhere in this element:

Unfortunately there is a new problem, because no existing elements can be used to clean up, so we can only add an empty element and clean it up.

. news {  Background-color:gray;  Border:solid 1px black;  }. News img {  float:left;  }. News p {  float:right;  }. Clear {  clear:both;  } <div class= "News" ><p>some text</p><div class= "Clear" ></ Div></div>

CSS Clear Property Definition and usage

The Clear property specifies which side of the element does not allow other floating elements.

(go) CSS floating-css, what is the document flow?