《css 解决法案.doc》由会员分享，可在线阅读，更多相关《css 解决法案.doc（10页珍藏版）》请在金锄头文库上搜索。
1、How To Clear Floats Without Structural MarkupReturn to PIE(This clearing technique was developed by Tony Aslett, of . The earliest known mention of the basic :after idea is found here.)Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subj
2、ect of clearing has appeared since it was written. You may find this newer article very interesting.Clearing Floats The Old Fashioned WayWhen a float is contained within a container box that has a visible border or background, that float does not automatically force the containers bottom edge down a
3、s the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say Thats not right! True, IE/Win does enclose a float within a container automatically, but
4、 only if the container element happens to possess the MS-only quality called hasLayout.This float-enclosing behavior in IE can also be toggled off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. Quite a
5、mess, and well cover it farther along in the article, in the Toggle Trouble section.The W3C suggests placing a cleared element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. Its described more fu
6、lly our article Float: The Theory:“.lets say you give that following box the clear property, clear: both; . What this does is extend the margin on the top of the cleared box, pushing it down until it clears the bottom of the float. In other words, the top margin on the cleared box (no matter what it
7、 may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look, with
8、a red border representing the container element:The standard method of making an outer container appear to enclose a nested float is to place a complete cleared element last in the container, which has the effect of dragging the lower edge of the containing box lower than the float. Thus the float a
9、ppears to be enclosed within the container even tho it really isnt. The code for a cleared box usually looks something like this: Some content Text not inside the floatSince that div is not floated, the container must recognize it and enclose it, and because of that top margin (added by the browser
10、because of the clear property), the div pulls the bottom edge of the container down below the bottom edge of the float.Problems With The MethodFirst and foremost, this clearing method is not at all intuitive, requiring an extra element be added to the markup. One of the major premises of CSS is that
11、 it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement.Besides that, some browsers can have trouble with certain kinds of clearing elements in some situations. Mozi
12、lla is particularly sensitive to clearing problems.Up til now there was no other way to do this, but no more! Thanks to the efforts of Tony Aslett, creator and operator of , we can now use advanced CSS to clear a float container in non-IE browsers and just let IE keep wrongly clearing itself. The up
13、shot is that we now have the option to avoid adding that pesky clearing element to the HTML markup. Woohoo!Clearing, 21st Century StyleIn the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dim
14、ension), but non-IE browsers will need a substitute for that element. Heres how its done.Using :afterThis CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet,
15、and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including position, float, list properties, and table properties. However, the clear property is allowed. Do you see where we are going here?Imagine that we use :after to insert a simple character like a period, and then give that generated element clear: both; . Thats all you really need to do the job, but no one wants a line space messing
