CSS (3) Resolution box model floating

CSS (3) Resolution box model floating

The previous blog left two issues: float and location. They just gave a brief description of the issues. Today, I will reveal their details carefully. This article is a float article.

Float is playing an increasingly important role in the popular CSS typographical era, just as aline is important to positioning web elements, but it is more powerful than aline.

The main function of float is to help objects align in the web page, and use different commands to make objects float left and right until border, padding, margin, or other object edges are encountered. Looking at this simple floating, we can design a variety of beautiful styles for our typographical design. Below we will introduce several types.

I classify them into the following two categories: normal floating and nested floating.

Normal floatingThere are three types: none; left and right.

1. float: none. By default, the results are all none. In this case, the webpage elements are arranged according to their own appearance mode, which is usually aligned by the edges and arranged sequentially by the text stream.

Code:

 No floating attributeNo float
This is what we have introduced: No floating settings, that is, the floating effect by default.

2. float: left. At this time, the box floated to the left, but the text ran to the right of the box!

 
 Object left floatingI float left now (float: left)
It's a float on the left. Can you see if the text is on the right of the image ???

3. float: right. The box floated to the right, and the text suddenly ran to the left!

 Object left floatingI float left now (float: left)
Now it's floating on the right. Can you see if the text is on the left of the image ???

Okay. The simplest one is described below.Nested floating.

1. Negative boundary floating: If a floating object has a negative boundary, that is, a floating object may float outside its parent object. This is a bit like absolute positioning, but unlike absolute positioning, it can also affect the text stream in the place where it is located. Use the standard browser FF to see the following code:

 Floating object with negative boundary [view in standard browser]What is the negative boundary floating effect? In the upper-right corner, the boundary of the small box is margin:-10px 10px 0px 0px;, folat: right. This effect is good. It is not made by relative or absolute positioning. Some texts have the surround effect. If you enter the title in the small box above and enter the content in the big box, you can give a similar effect.

2. Floating BoxWidth> Regular parent box. If a wider sub-box is set to float, what will happen to the narrow regular parent box?

Answer: The floating sub-box will not affect the width of the parent box. The larger part will be outside the parent box, but will not affect the movement of the external text stream, but will cover the outer text. Use the standard browser FF to check the following code:

 When the child element is wider than the parent element width, [view it in a standard browser]I am floating left now (float: left), and my width is smaller than that of the sub-box, but it won't open me, And I set a certain left boundary, the purpose is to make it easier to see that the child box is getting out. I am a child box, And my width is larger than that of my parent box. At the same time, my floating is folat: right, therefore, the right side is on the right side of the parent box, and the extended part of the parent box is on the left side of the large box.
In this case, the width of the sub-box is greater than that of the parent box.

3. Floating BoxHeight> Regular parent box. Similarly, if the height of the floating sub-box exceeds the normal parent box, what should we do if we want the parent box to automatically adapt to the height change of the sub-box?

Answer: We can clear the floating behind the floating sub-box within the parent level. Use the standard browser FF to check the following code:

 Highly adaptive [view in a standard browser]I am a parent box, my height is not set, but when my child box is higher than me, my height cannot be self-adaptive in the standard browser. This box is a small box, it does not set the height attribute, its height is automatically increased with the addition of the text in it, but when its height exceeds the parent box, in standard browsers, the parent level is not supported. In this case, the width of the Child level is the same as that of the parent level element, but we usually need this height, how can we make highly adaptive? A common method is to add the following style to the parent level: Clear the floating of the small box at the same level.
 

Note: To set a floating object, you must set a width for it. Otherwise, unexpected results will occur, that is, the width of an object without a set width and NO content will approach 0 after it is floated.

Next let's take a look at the Clear, that is, the application to be cleared. The two are closely related.

Sometimes our float will bring us extra troubles, such as the footer in the footer block of the niudi news publishing system. As the content area floats, it will move to the right along with the left, but we want to make it appear at the bottom as a single row, then we have to use a clear: both.

In addition, we can also use it to make different floating effects. For example, we can make a text stream float twice or change it to a vertical bar (clear the left floating ):

For example, a text stream floats twice.

 Let floating objects exist on both sides of the object
Sometimes our float will bring us extra troubles, such as the footer in the footer block of the niudi news publishing system. As the content area floats, it will move to the right along with the left, but we want to make it appear at the bottom as a single row, then we have to use a clear: both.
Sometimes our float will bring us extra troubles, such as the footer in the footer block of the niudi news publishing system. As the content area floats, it will move to the right along with the left, but we want to make it appear at the bottom as a single row, then we have to use a clear: both. Sometimes our float will bring us extra troubles, such as the footer in the footer block of the niudi news publishing system. As the content area floats, it will move to the right along with the left, but we want to make it appear at the bottom as a single row, then we have to use a clear: both.

Summary: Well, the above is just a few float applications, not only limited to this. However, float or clear is a typographical design method. Mastering these skills is an essential knowledge for web developers. As a means of CSS + div control, we can combine these skills with the front-end of our niuyun news publishing system, can we design an interface with a better style? Ofcourse, yes!