CSS (iii) analyzing the floating of the box model

The last blog left a floating and positioning two problems, just a simple description of them, today carefully through their details, this article for the floating article.

Floating is playing an increasingly critical role in the era of CSS typography, just as Aline is important for locating page elements. But it's much more powerful than Aline.

The main function of float is to help the object align in the Web page. Use different commands to float objects around until you encounter border, padding, margin, or other object edges. Although this simple floating, but can for our layout design a variety of beautiful style, the following introduction several.

I put them in the following two categories: normal float and nested float.

Ordinary float is divided into none;left and right three kinds.

1, Float:none. By default, none is the effect. At this point, the page elements will be arranged according to their own appearance, usually by the alignment, in accordance with the text flow running in order.

Code:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
2, Float:left.
At this point the box floats to the left. And the words ran to the right of the box!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
3, Float:right. The box floats to the right, and the text runs to the left!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
All right, that's it. The simplest, nested floats are described below.
1, negative boundary floating:  floating objects will have a negative boundary, that is, floating objects may float to the outside of their parent object. This is a bit like an absolute positioning effect, but unlike absolute positioning, it can also affect the text flow in its place , using the standard browser FF to see the following code effect:
<span style= "color: #000000;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

2, Floating box width > Regular parent box. Suppose a wide sub-box is set to float, what effect does it have in a narrower regular parent box?
Answer: The floating sub-box does not affect the width of the parent box, and more than the part will be outside the parent box. It does not affect the movement of the outside text stream. Instead, it covers the top of the outer text. See The following code effects with the standard browser FF:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 
 </div></div><p> at this time, the child box is wider than the parent box </p></body> 

3, floating sub-box height > Regular parent box. 
As above, the floating sub-box height is more than the normal parent box. What if we want the parent box to be able to adapt itself to changes in the height of the sub-box?
Answer: We can be within the parent. Floating sub box clear floating, i.e. <Div style= "Clear:both" ></div>. See The following code effects with the standard browser FF: 
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
</div><!--<div style= "Clear:both" ></div> remove the gaze here and look at it, so that the parent box's high-level will be able to adapt--></div></ Body>
Note: To set a floating object, be sure to set a width for it, or there will be unexpected results. That is, objects that do not have a width set and have no content will have a floating width that is nearly 0. 

Let's take a look at the clear. That is, the applications that are purged, they are closely related. 
Sometimes we float will give us extra trouble, such as the beef Brisket News Announcement System footer block footer. As the content area floats, it will move to the right with the left float, and we want it to be a single line out of the bottom now, and then have to use a clear:both.
In addition, we are able to use it to make different floating effects. If we can make a text flow two times floating or horizontal vertical row (clear left float can):
Example: A text stream appears floating two times.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
</p><div class= "Box2" ></div><p id= "Clearf" > sometimes we float to give us extra trouble. such as beef Brisket News Announcement System in the footer block footer. As the content area floats, it will move to the right with the left float. And we want to make it stand alone as the bottom line now. Then you have to use a clear:both.　　Sometimes we float will give us extra trouble, such as beef Brisket News Announcement System footer block footer, with the content area floating in the application will make it follow the left float to the right, and we want to let it alone as a line out of the bottom now, then we have to use a clear:both. </p></body>

Summary: Well, there are several applications of float, not limited to this. But whether float or clear, is a way of typesetting design.
Mastering these skills is a necessary knowledge of web development Foundation, as a means of css+div control. Combined with our Beef brisket press release system front desk, can we have the interface design more of their own style it? ofcourse,yes!
              
 
CSS (iii) analyzing the floating of the box model