clearfix和clear的讨论

最新推荐文章于 2024-09-05 11:49:00 发布

weixin_33924220

最新推荐文章于 2024-09-05 11:49:00 发布

阅读量63

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/zhuyezi/archive/2009/12/25/1631939.html

版权

1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；
2、使用:after的伪类标签；
3、在父容器设置overflow属性（其值不可为visible）；
4、将父容器也设置浮动的属性，利用浮动元素的一个特征：浮动元素会闭合浮动元素；
5、使用<br clear="all" />；
...

以上大概就是几种常见的方法，我不去深究各自方法的优缺点和兼容性（有兴趣的朋友可以都试试），我只拿出其中两种方法进行比较：clear和:after，看看到底应该怎么用。
先看下面的例子：

1、一行两列，子容器进行浮动布局

没有进行浮动清除浏览显示如下结果：
IE：

FF：

那如果我们进行清除改怎么写呢？

这里如果用clear就得加一个空白的div，如
css：
.clear {clear:both;}
xhtml：
<div id="container">container
   <div id="content">content</div>
   <div id="content2">contenet2</div>
   <div class="clear"></div>
</div>

而使用:after，如
css：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html>body .clearfix { display: inline-block; width: 100%; }
* html .clearfix { height: 1%; /* End hide from IE-mac */ }
/* ie7 hack*/
*+html .clearfix { min-height: 1%; }
/*]]>*/

简写为:

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

xhtml：
<div id="container" class="clearfix ">container
<div id="content">content</div>
<div id="content2">contenet2</div>
</div>

这里我们可以看出使用:after比较方便；

2、两行两列，第一行两子容器浮动，第二行单独一个子容器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>无标题文档</title> <style type="text/css"> /*<![CDATA[*/ #container {width:500px; background:#000; color:#fff;} #content {width:300px; height:120px; background:#FFFF00; color:#000; float:left;} #content2 {width:100px; height:100px; background:#f22; color:#000; float:left;} #content3 {width:60px; background:#ccc; color:#000;} .clear {clear:both;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline-block; width: 100%; } * html .clearfix { height: 1%; /* End hide from IE-mac */ } /* ie7 hack*/ *+html .clearfix { min-height: 1%; } /*]]>*/ </style> </head> <body> <div id="container" class="clearfix" >container <div id="content">content</div> <div id="content2">contenet2</div> <div id="content3">contenet3</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

如此写法浏览显示结果如下：

IE：

FF：

FF下显示正常，而IE下则跟随浮动靠右侧了，换种写法：
<div id="container">container
<div id="content">content</div>
<div id="content2">contenet2</div>
<div id="content3" class="clear">contenet3</div>
</div>
浏览全部显示正常。

值得主意的是，这里使用class="clear"需要遵循一个原则：应该在设置浮动标签容器的同级进行清除。这里正好巧妙的应用了这一点，避免产生一个空白的div。

3、设置浮动的容器里再添加浮动的子容器，可以自动清除浮动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>无标题文档</title> <style type="text/css"> /*<![CDATA[*/ #container {width:500px; background:#000; color:#fff;} #content {width:300px; height:120px; background:#FFFF00; color:#000; float:left;} #left {width:120px; height:100px; background:#ff0000; float:left;} #right {width:120px; background:#0000ff; float:right;} #content2 {width:100px; height:100px; background:#f22; color:#000; float:left;} #content3 {width:60px; background:#ccc; color:#000;} .clear {clear:both;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline-block; width: 100%; } * html .clearfix { height: 1%; /* End hide from IE-mac */ } /* ie7 hack*/ *+html .clearfix { min-height: 1%; } /*]]>*/ </style> </head> <body> <div id="container" class="clearfix" >container <div id="content">content <div id="left">left</div> <div id="right">right</div> </div> <div id="content2">contenet2</div> <div id="content3" class="clear">contenet3</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

显示如图：

原文:http://bbs.blueidea.com/thread-2892228-1-1.html

转载于:https://www.cnblogs.com/zhuyezi/archive/2009/12/25/1631939.html

weixin_33924220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clearfix和clear的讨论

1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；2、使用:after的伪类标签；3、在父容器设置overflow属性（其值不可为visible）；4、将父容器也设置浮动的属性，利用浮动元素的一个特征：浮动元素会闭合浮动元素；5、使用<br clear="all" />；...以上大概就是几种常见的方法，我不去深究各自方法的优缺点和兼容性（有兴趣的朋友可以都试试），我...
复制链接

扫一扫