Many people have studied the problem of closing floating elements, but the solutions are different, and not every method is perfect. Closing floating elements (or clearing floats) is a problem often encountered in web standard design. Therefore, here I would like to summarize several commonly used methods and compare their ease of use and applicable environments. If you have a better way, please bring it up for discussion.
The simplest case is that we include a small, fixed-width div element (such as navigation, reference, etc.) in a large div together with other element content. For example, the following code:
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
We can set a width value (for example, 20%) for "#inner", but since div is a block-level element, even if we set the width, the content behind it can only be displayed in the next line unless we give it Set a float property (either float to the left or float to the right). Then the problem we mentioned above will arise at this time.
This won't be a problem if "#inner" has a smaller width and height than "#outer".
However, if the height of "#inner" exceeds the height of "#outer", then the bottom of will exceed the bottom of "#outer". This is because after we set the float attribute for "#inner", it will break away from the text flow, and no matter how its width and height change, "#outer" will not follow the change.
Solution:
1) Additional tag method
The first method and the method recommended by W3C is to use additional tags. This method is to add an empty tag at the end of the content. A typical approach is to use something like:
<br style="clear:both;" />
Or use
<div style="clear:both;"></div>
This method forces the outer container to expand by adding an HTML element. However, this method will add additional tags and make the HTML structure look less concise.
Note: I found that in Internet Explorer (whether 6 or 7) <br style="clear:both" /> can clear floating elements, but cannot close floating elements. This problem does not exist in Firefox. I don’t know why? !
2) Use the after pseudo-class
to add new content at the end of the specified current content using the after pseudo-class and content declaration. A common approach is to add a "dot" because it is smaller and less noticeable. Then we use it to clear the float (close the floated element) and hide the content:
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
The strange thing is that Internet Explorer 6 and below in Windows does not support the after pseudo-class in CSS 2.1, but Internet Explorer in Mac can be used normally, so we have to deal with Win/IE separately. Among the many methods to distinguish between Internet Explorer in Win and Mac, the most commonly used method is the Holly trick, CSS code:
/* This code can only be seen by IE/Win*/
CSS rules
/*End Hack */
There are two lines of comments in the above code, and a backslash () appears at the end of the first line. Internet Explorer on Mac will think that the comment has not ended, so it continues until the first line. A complete "*/" appears, and all the characters in the middle are regarded as comments, but IE/Win will only regard the first and third lines as comments, and the middle ones are valid codes. So this distinguishes IE on different platforms.
Based on the above principles, to clean up floats on IE 6 in Windows, you can use the following code:
#outer {
display:inline-block;
}
/* Holly Hack Begine */
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
PS If you don't consider IE6/Mac users, you only need to write * html #outer {height:1%;}.
In addition, it seems that display:inline-block does not work well in Internet Explorer 7. So use the most complete Hack tricks.
3) Float external elements. The float-in-float
method is very simple, which is to float the "#outer" element (to the left or right).
However, another problem caused by this method is that the next element adjacent to "#outer" will be affected by "#outer" and its position will change, so you must be careful when using this method. There is an option to float all elements on the page, and finally use an appropriate meaningful element (such as a footer) to clean up the floats. This helps reduce unnecessary markup, but too many floats will increase the difficulty of layout. .
4) Set overflow to hidden or auto.
Set the overflow value of the "#outer" attribute to hidden or auto to also clean up floats.
This method does not require adding additional tags. But be careful when using overflow because it affects browser performance. In addition, simply setting overflow to hidden or auto in Internet Explorer 6 cannot effectively clear the float (close the floating element). You must also specify a dimension of "#outer", that is, either specify a width or a height for it:
#outer {
overflow:auto;
width:100%;
}
Note: If you want to use this method to clear floats (close floating elements) on IE5/Mac, you must set the overflow attribute to hidden.
Compare and choose
which of the four methods is best? First of all, it is not recommended to use the after pseudo-class. Compared with the other three methods, the holly trick is a bit too cumbersome and difficult to master. The holly trick I mentioned above is not just a problem on IE/Win. When:hover appears, it also There will be other problems, so we added attributes such as inline-block, which means there is more uncertainty in this method. Recommended for people who are "clean" about code and have high technical skills.
Then the other three methods can actually be considered. However, when using overflow, it may have an impact on page performance, and this impact is uncertain. It is best to test your page on multiple browsers;
and for using additional tags to clear floats (close floats element), is a practice recommended by the W3C. As for whether to use <br /> elements or empty <div></div>, you can choose according to your own preferences (of course you can also use other block-level elements). However, it should be noted that <br /> itself has performance. It will have an extra line break, so its height must be set to 0 to hide its performance. So in most cases it is more appropriate to use an empty <div>.
Float-in-float is also a good choice. Just add a layer of <div> to the outer layer of the element you want to clean up and set the attribute load:left, but pay attention to changes in adjacent elements.