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 is floating.

Floating is playing a more and more important role in this era of CSS typography, as Aline the importance of positioning page elements, but it is more powerful than Aline.

The main function of float is to help the object align in the Web page, and to float the object left and right through different commands until it encounters 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 have categorized them in two main 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, and the page elements will be arranged in their own way, usually by the alignment of the text flow in chronological 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, while the text runs 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, let's finish. The simplest, nested floats are described below.
1, negative boundary floating:  Floating object will have a negative boundary, that is, the floating object may float to the outside of its parent object, which is somewhat like an absolute positioning effect, but unlike absolute positioning, it can also affect the text flow where it is located ,  See the following code effect with the standard browser FF:
<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. If a wide sub-box is set to float, what effect does it have in a narrower regular parent box?
Answer: The floating sub-box will not affect the width of the parent box, the more than the part will be outside the parent box, but will not affect the movement of the outside text flow, but the outside of the text to cover the top. See the following code effect 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 ">

3, floating sub-box height > Regular parent box. Ditto, if the floating sub-box height is more than the normal parent box, we want the parent box to automatically adapt to the height of the sub-box changes, what to do? 
Answer: We can clear the float behind the floating child box within the parent, i.e. <Div style= "Clear:both" ></div>. See the following code effect 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 ">
Note: Set a floating object, be sure to set a width for it, otherwise there will be unexpected results, that is, there is no width and no content objects floating after the width will be nearly 0. 
Let's take a look at the clear , the applications that are cleared, and they are closely related. 
Sometimes we float will give us extra trouble, such as beef brisket in the news release 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 stand alone as a line at the bottom, then we have to use a clear:both.
In addition, we can also use it to make different floating effects, such as we can let a paragraph of text flow two times floating or horizontal vertical row (clear left floating can be):
                 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 ">

Summary: Well, the above introduction is just a few applications of float, not limited to this. But either float or clear is a way of typesetting. Mastering these skills, is a web development basic knowledge of web developers, as a means of css+div control, and then combined with our beef brisket press release system front desk, can we put the interface design more own style it? ofcourse,yes!