﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-java 记录-文章分类-CSS</title><link>http://www.blogjava.net/hua020505110/category/49466.html</link><description>学习java</description><language>zh-cn</language><lastBuildDate>Sat, 27 Aug 2011 16:35:40 GMT</lastBuildDate><pubDate>Sat, 27 Aug 2011 16:35:40 GMT</pubDate><ttl>60</ttl><item><title>万能清除浮动样式</title><link>http://www.blogjava.net/hua020505110/articles/357352.html</link><dc:creator>啊飞</dc:creator><author>啊飞</author><pubDate>Fri, 26 Aug 2011 06:31:00 GMT</pubDate><guid>http://www.blogjava.net/hua020505110/articles/357352.html</guid><wfw:comment>http://www.blogjava.net/hua020505110/comments/357352.html</wfw:comment><comments>http://www.blogjava.net/hua020505110/articles/357352.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hua020505110/comments/commentRss/357352.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hua020505110/services/trackbacks/357352.html</trackback:ping><description><![CDATA[<div><span style="color: #333333; font-family: 微软雅黑, helvetica, Arial; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。<br />这个方法来源于<a href="http://www.positioniseverything.net/easyclearing.html" target="_blank" style="color: #2c6288; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">positioniseverything</a>&nbsp;，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。</p><div style="color: #110000; background-color: #f9f9f9; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; overflow-x: auto; overflow-y: hidden; width: 820px; "><div style="vertical-align: top; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: monospace; width: auto; float: none; clear: none; overflow-x: visible; overflow-y: visible; font-size: 12px; line-height: 1.333; white-space: pre; "><span style="color: #009900; ">&lt;<span style="color: #000000; font-weight: bold; ">style</span> <span style="color: #000066; ">type</span><span style="color: #66cc66; ">=</span><span style="color: #ff0000; ">"text/css"</span>&gt;</span> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;}  /* for IE/Mac */ &nbsp; <span style="color: #009900; ">&lt;<span style="color: #66cc66; ">/</span><span style="color: #000000; font-weight: bold; ">style</span>&gt;</span><span style="color: #808080; font-style: italic; ">&lt;!-- main stylesheet ends, CC with new stylesheet below... --&gt;</span> &nbsp; <span style="color: #808080; font-style: italic; ">&lt;!--[if IE]&gt;</span> <span style="color: #808080; font-style: italic; ">&lt;style type="text/css"&gt;</span> <span style="color: #808080; font-style: italic; ">.clearfix {</span> <span style="color: #808080; font-style: italic; ">zoom: 1;     /* triggers hasLayout */</span> <span style="color: #808080; font-style: italic; ">&lt;span style="color: #aa0000;"&gt;display: block;     /* resets display for IE/Win */&lt;/span&gt;</span> <span style="color: #808080; font-style: italic; ">}  /* Only IE can see inside the conditional comment</span> <span style="color: #808080; font-style: italic; ">and read this CSS rule. Don't ever use a normal HTML</span> <span style="color: #808080; font-style: italic; ">comment inside the CC or it will close prematurely. */</span> <span style="color: #808080; font-style: italic; ">&lt;/style&gt;</span> <span style="color: #808080; font-style: italic; ">&lt;![endif]--&gt;</span></pre></div></div><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">Update @ 2008.11.12</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">刚刚看到<a href="http://lifesinger.org/blog/?p=614" target="_blank" style="color: #2c6288; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">一篇日志</a>说这个问题，受到了点启发：</p><div style="color: #110000; background-color: #f9f9f9; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; overflow-x: auto; overflow-y: hidden; width: 820px; "><div style="vertical-align: top; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: monospace; width: auto; float: none; clear: none; overflow-x: visible; overflow-y: visible; font-size: 12px; line-height: 1.333; white-space: pre; "><span style="color: #6666ff; ">.clearfix</span><span style="color: #3333ff; ">:after </span><span style="color: #00aa00; ">{</span>     <span style="color: #000000; font-weight: bold; ">content</span><span style="color: #00aa00; ">:</span> <span style="color: #ff0000; ">"020"</span><span style="color: #00aa00; ">;</span>     <span style="color: #000000; font-weight: bold; ">display</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">block</span><span style="color: #00aa00; ">;</span>     <span style="color: #000000; font-weight: bold; ">height</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>     <span style="color: #000000; font-weight: bold; ">clear</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">both</span><span style="color: #00aa00; ">;</span> <span style="color: #00aa00; ">}</span> <span style="color: #6666ff; ">.clearfix</span> <span style="color: #00aa00; ">{</span>     zoom<span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">1</span><span style="color: #00aa00; ">;</span> <span style="color: #00aa00; ">}</span></pre></div></div><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">这个是优化版的清除浮动的样式，很值得推荐。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">另外，我见到了一个<a href="http://sonspring.com/journal/clearing-floats" target="_blank" style="color: #2c6288; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">无敌的清除浮动的样式</a>，这个是通过独立的代码来清除的。</p><div style="color: #110000; background-color: #f9f9f9; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; overflow-x: auto; overflow-y: hidden; width: 820px; "><div style="vertical-align: top; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: monospace; width: auto; float: none; clear: none; overflow-x: visible; overflow-y: visible; font-size: 12px; line-height: 1.333; white-space: pre; ">html body div.<span style="color: #000000; font-weight: bold; ">clear</span><span style="color: #00aa00; ">,</span> html body span.<span style="color: #000000; font-weight: bold; ">clear</span> <span style="color: #00aa00; ">{</span>      <span style="color: #000000; font-weight: bold; ">background</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">none</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">border</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">clear</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">both</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">display</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">block</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">float</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">none</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">font-size</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">margin</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">padding</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">overflow</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">hidden</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">visibility</span><span style="color: #00aa00; ">:</span> <span style="color: #993333; ">hidden</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">width</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span>      <span style="color: #000000; font-weight: bold; ">height</span><span style="color: #00aa00; ">:</span> <span style="color: #cc66cc; ">0</span><span style="color: #00aa00; ">;</span> <span style="color: #00aa00; ">}</span></pre></div></div><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">这个样式可以通过在页面中添加&lt;div class=&#8221;clear&#8221;&gt;&lt;/div&gt; 或 &lt;span class=&#8221;clear&#8221;&gt; &lt;/span&gt;来清除页面中的浮动。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; text-indent: 2em; line-height: 1.8; ">这个页面正是著名的<a href="http://960.gs/" target="_blank" style="color: #2c6288; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">960 CSS 框架</a>的作者的博客。而他却在960 CSS框架中<strong>同时使用</strong>了这两种方法。</p></span></div><img src ="http://www.blogjava.net/hua020505110/aggbug/357352.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hua020505110/" target="_blank">啊飞</a> 2011-08-26 14:31 <a href="http://www.blogjava.net/hua020505110/articles/357352.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>