css中clear:both;的详解及代码、图片实例

在css中我们会经常要用到“清除浮动”clear，比较典型的就是clear:both;

css手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

比如： <p style="float:left; width:200px;">这个是第1列</p> <p style="float:right; width:400px;">这个是第2列</p> <p>这个是第3列</p>

如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起，如下图：

所以我们在第3个p标签处加一个清除浮动clear:both; <p style="float:left; width:200px;">这个是第1列</p> <p style="float:left; width:400px;">这个是第2列</p> <p style="clear:left;">这个是第3列</p>

此时布局就正常了，如下图：

------------------------------------------------------------------------------------------------------------------

通常，我们往往会将“清除浮动”单独定义一个css样式，如： .clear { clear: both; } 然后使用<div class="clear"></div>来专门进行“清除浮动”，如下代码：

不过也有不赞同的意见认为<div class="clear"></div>可以不写，直接在下层清除就可以了，如下代码：

由此看来<div class="clear"></div>确实不需要写。

------------------------------------------------------------------------------------------------------------------

不过很显然，我们在网页设计时还有一种很普遍的情况： <style type="text/css"> #main { background-color:#3399CC; width:600px; padding:20px; } #sidebar { background-color:#FF6600; float:left; width:130px; } #container { float:right; width:420px; background-color:#FFFF33; } </style> <div id="main"> <div id="sidebar">第一段内容第一段内容第一段内容</div> <div id="container">第二段内容第二段内容第二段内容</div> </div> <p style="clear:both;">第三段内容</p>

该页面测试在IE6下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本，如下图：

不过FF下的效果可不是这样的（如下图）。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：

.clear { clear: both; height: 1px; margin-top: -1px; overflow: hidden; }

程序代码:

<div id="main"> <div id="sidebar">第一段内容第一段内容第一段内容</div>

<div id="container">第二段内容第二段内容第二段内容</div>

<p>第三段内容</p>

在css中我们会经常要用到“清除浮动”clear，比较典型的就是clear:both;

css手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

比如： <p style="float:left; width:200px;">这个是第1列</p> <p style="float:right; width:400px;">这个是第2列</p> <p>这个是第3列</p>

如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起，如下图：

此时布局就正常了，如下图：

------------------------------------------------------------------------------------------------------------------

通常，我们往往会将“清除浮动”单独定义一个css样式，如： .clear { clear: both; } 然后使用<div class="clear"></div>来专门进行“清除浮动”，如下代码：

不过也有不赞同的意见认为<div class="clear"></div>可以不写，直接在下层清除就可以了，如下代码：

由此看来<div class="clear"></div>确实不需要写。

------------------------------------------------------------------------------------------------------------------

该页面测试在IE6下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本，如下图：

对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：

.clear { clear: both; height: 1px; margin-top: -1px; overflow: hidden; }

程序代码:

<div id="main"> <div id="sidebar">第一段内容第一段内容第一段内容</div>

<div id="container">第二段内容第二段内容第二段内容</div>

<p>第三段内容</p>

再论清除浮动的空DIV方法

CSS 使用浮动会造成布局的混乱，通常清除浮动的方法是，利用一个如下样式的空 Div：

<div class="clear"></div> .clear{clear:both;}

更为优良的 CSS 代码是：

.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;}

这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。

当然，这在通过 CSS 在元素之后追加 "." 并不必要，因为还需要 visibility 来隐藏掉它。通过优化，代码如下：

.clear:after{content:"020";display:block;height:0;clear:both;} .clear{zoom:1;}

其中，020 指在容器后添加空格，这样就避免使用 visibility 隐藏可视性了。

另外，不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器，未免有些突兀。

再论清除浮动的空DIV方法

CSS 使用浮动会造成布局的混乱，通常清除浮动的方法是，利用一个如下样式的空 Div：

<div class="clear"></div> .clear{clear:both;}

更为优良的 CSS 代码是：

.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;}

这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。

当然，这在通过 CSS 在元素之后追加 "." 并不必要，因为还需要 visibility 来隐藏掉它。通过优化，代码如下：

.clear:after{content:"020";display:block;height:0;clear:both;} .clear{zoom:1;}

其中，020 指在容器后添加空格，这样就避免使用 visibility 隐藏可视性了。

另外，不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器，未免有些突兀。

好的访问地址：http://css.gs/float/float.html

posted @ 2012-11-24 11:18 -禅意花园- Views(985) Comments(0) 收藏举报

刷新页面返回顶部

-禅意花园-

脚步到达不了的地方，眼光可以到达；眼光到达不了的地方，梦想可以到达

css中clear:both;的详解及代码、图片实例

公告