Proficient in CSS advanced Web standard solutions: Floating

2.2.4 floating

The last Positioning Model is the floating model. A floating box can be moved left and right until its outer edge hits the edge of an contained box or another floating box. Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

As shown in Figure 2-13, when frame 1 is moved to the right, it is detached from the document stream and moved to the right until its right edge hits the right edge of the contained box.

Figure 2-13 elements floating to the right

In Figure 2-14, when frame 1 is moved to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view. If all three boxes are moved to the left, box 1 is moved to the left until the contained box is reached, and the other two boxes are moved to the left until the first floating box is reached.

Figure 2-14 elements floating to the left

If the contained block is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is sufficient space (see Figure 2-15 ). If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ".

Figure 2-15 if there is not enough horizontal space, the floating element moves down until there is enough space

Line box and cleanup

The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box. In fact, create a floating box so that the text can be centered around the image (see Figure 2-16 ).

Figure 2-16 the row box next to the floating box is shortened

To prevent rows from being enclosed by floating boxes, you must apply clear to this box. The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box. To achieve this effect, add enough space on the top blank edge of the cleaned element to vertically drop the top edge of the element to the floating box (see Figure 2-17 ).

Figure 2-17 clear the top blank edge of the element to leave enough vertical space for the previous floating box

Floating elements are separated from the document stream and do not affect the surrounding elements. However, clearing the elements actually leaves a vertical space for the floating elements.

This is a useful layout tool that allows the surrounding elements to leave space for floating elements. This solves the problem of absolute positioning, that is, changes in the vertical height do not affect the surrounding elements, thus undermining the design.

Let's take a closer look at floating and cleaning. Suppose there is an image and you want it to float to the left of a text block. You want to include the image and text in another element with the background color and border. You may write the followingCode:

. News {
Background-color: Gray;
Border: solid 1px black;
}

. News IMG {
Float: left;
}

. News P {
Float: right;
}
<Div class = "news">

<P> some text </P>
</Div>

However, because the floating element is out of the Document Stream, the DIV surrounding the image and text does not occupy space. How can we visually enclose floating elements? You need to apply clear somewhere in this element (see Figure 2-18 ).

Figure 2-18 because floating elements do not occupy space, container elements do not enclose them. Adding an empty element for cleanup forces the container element to enclose the floating element.

Unfortunately, no existing element can be applied for cleanup, so you need to add an empty element and clear it.

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

This will achieve the expected results, but we need to add unnecessary code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.

You can also choose not to clear floating text and images, but to float the container Div:

. News {
Background-color: Gray;
Border: solid 1px black;
Float: left;
}

. News IMG {
Float: left;
}

. News P {
Float: right;
}

<Div class = "news">

<P> some text </P>
</Div>

This will also produce the desired results. Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float almost everything in the layout, and then clean these floating elements with appropriate meaningful elements (often the footer of the site. This helps reduce or remove unnecessary tags. However, floating will become complicated, and some old-fashioned browsers have difficulties in handling the layout of many floating elements. Therefore, many people prefer to add a small amount of additional tags.

The overflow attribute with the application value "hidden" or "Auto" will automatically clear any contained floating elements without additional tags. This method is not suitable for all situations, because the overflow attribute of the Setting box will affect its performance.

Finally, some people use CSS-generated content or JavaScript to clear floating elements. The basic concepts of these two methods are the same. Instead of adding elements to the tag for cleanup, add them dynamically to the page.

For the two methods, you need to specify where the elements to be cleaned should appear, and you often need to add a Class Name:

 

<Div class = "News clear">

<P> some text </P>
</Div>

When using the CSS method, use the following: After pseudo class and content declaration to add new content at the end of the specified existing content. In this example, I add a period because it is a very small and unnoticeable character. You do not want the new content to occupy the vertical space or display it on the page. Therefore, you need to set height to 0 and visibility to hidden. Because the cleaned elements add space on the top blank side of them, the generated content needs to set its display attribute to block.

After this setting, you can clear the generated content:

. Clear: After {
Content :".";
Height: 0;
Visibility: hidden;
Display: block;
Clear: both;
}

This method works in most modern browsers, but does not work in IE 6 or earlier versions. There are various solutions, many of which are recorded in www.positioniseverything.net/easyclearing.html. The most common solution involves the use of Holly tricks (See Chapter 8th), which forces ie 5-6 to apply "layout" (see Chapter 9th) and incorrectly clear floating elements.

. Clear {
Display: block;
}
/* Holly hack targets ie win only \*/
* Html. Clear {Height: 1% ;}
. Clear {display: block ;}
/* End Holly hack */

However, due to its complexity, this method may not be suitable for everyone.

The explanation of the JavaScript method is beyond the scope of this book, but it should be briefly mentioned. Different from the preceding method, the JavaScript method is effective in all mainstream browsers (when the script function is enabled ). However, if you use this method, make sure that the content is still readable when the script function is disabled.

Conclusion 2.3

In this chapter, we have learned some properties of the box model. We can see how a single blank edge is formed by the superposition of adjacent vertical blank edges, and how IE 5.x on Windows explains the width attribute in a different way than other browsers. Understand the differences between absolute positioning and relative positioning, and how useful it is to perform absolute positioning in the relative positioning container. Finally, we can see the floating performance in various situations and learn how to clean up elements by adding a blank edge on the top.

With this knowledge, we can start to use them. In the next part of this book, we will explain many core CSS concepts and you will see how to use these concepts to create various useful and practical technologies. Open the usual text editor and we will start programming.