The clear property lets you specify whether a floated element should be moved down to prevent its positioning from being obstructed by other floated elements in its path. The property is typically used to solve the problem caused when the height of a floated element that is before another floated element prevents it from being placed as far as possible toward the left or right edge of the containing element. Figures 12.26 and 12.27 show an example of this problem, in which the fourth box is being blocked by the first from going all the way to the left, because its height makes it get in the way. The body{} rule specifies the width of the page and the properties in the p{} rule play the same functions as described in the previous example. The font: size in the b{} rule makes the size of the numbers larger and only used here to make the numbering of the boxes more discernible to aid the demonstration. The property is discussed more fully in Chapter 13.
To address the problem in the example, the clear property is used to move the fourth block down so that it can clear the obstruction. It is non- inherited and the values it commonly takes are listed in Table 12.1. Figure 12.28 shows how the property is used and Figure 12.29 the effect.
In the example, the fourth box is moved down so that its path is no longer obstructed and can be moved left as far as possible. To do this, the fourth <p> element is assigned to the “clearfix” class and the .clearfix { clear:left;} rule says to move the element. Using both as value would achieve the same result.
1. A Common Problem with Non-Floated Parent Elements
It is sometimes desired to add a border around floated elements. In order to achieve this, it is necessary to place the floated elements in a containing element that is not floated. However, when a non-floated containing element contains only floated elements, browsers may display it as if it has a height of Opx. This means that if the border property is specified for it, the border is collapsed and displayed as a line above the floated elements, instead of around them. Figures 12.30 and 12.31 demonstrate this problem using a code similar to that in Figure 12.28. Notice how the border of the <div> element is collapsed into a top edge.
The problem demonstrated in the example can be solved in a number of ways, each of which has pros and cons and therefore suitable for different design situations. The following are some of the commonly used:
- Giving the containing element specific height.
- Floating the containing element.
- Specifying the overflow property on the containing element and giving it the value of auto or hidden. The property was introduced in and is actually designed to handle the content overflow but works for this problem. To resolve the problem in Figure 12.31, overflow:auto; is simply added to the div{} rule in Figurel2.32. Figure 12.33 shows the result.
2. Multi-Column Content with Floats
Although CSS provides properties that are designed specifically for creating multi-column layouts, the float property can be used to produce a version of this. Note that a multi-column layout is different from what you have seen so far (e.g., in Figure 12.32). This is because whereas columns are clipped in the examples when the browser is reduced beyond the width of the content, in a float-based multi-column layout, the rightmost column moves to the left edge of the containing element as soon as there is not enough width-space for it, and this continues until all columns are in a single column at the left edge. Figures 12.33 and 12.34 show an example implementation.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.