关于clearfix和clear的讨论

最新推荐文章于 2019-12-17 15:38:14 发布

weixin_30333885

最新推荐文章于 2019-12-17 15:38:14 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/sunnywindycloudy/p/7380742.html

版权

　　本文摘自百度文库

　　还是提到了一个关于网页制作很古老的问题，浮动的清除。

　　虽然看过一些资料介绍说能不用浮动就尽量不要用，但对定位不是很熟的我来说，浮动就不能不用了；既然惹上这个麻烦，就得想个办法进行解决。

　　在论坛里搜索，可以看到有很多这方面的介绍，看过一些总结有一下几种方法：

　　1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；

　　2、使用:after的伪类标签；

　　3、在父容器设置overflow属性（其值不可为visible）；

　　4、将父容器也设置浮动的属性，利用浮动元素的一个特征：浮动元素会闭合浮动元素；

　　5、使用<br clear="all" />；

　　...

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

　　先看下面的例子：

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

<!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" />    
<title>关于clearfix和clear的讨论</title>    
<style type="text/css">    
/*<![CDATA[*/   
#container {width:500px; background:#000; color:#fff;}   
#content {width:300px; height:100px; background:#FFFF00; color:#000; float:left;}   
#content2 {width:100px; height:100px; background:#f22; color:#000; float:left;}   
/*]]>*/    
</style>    
</head>    
<body>    
<div id="container">container    
<div id="content">content</div>    
 <div id="content2">contenet2</div>    
</div>    
</body>    
</html>

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

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%; }

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" />    
<title>关于clearfix和clear的讨论</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" />    
<title>关于clearfix和clear的讨论</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>

显示如图:

在经典论坛朋友的帮助下，对.clearfix又提出了一种写法：

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

个人觉得这样更简单，而原理是相同的，就是对haslayout进行触发。

总结一点就是：方法不是唯一的，灵活应用才是必须的

转载于:https://www.cnblogs.com/sunnywindycloudy/p/7380742.html

weixin_30333885

关注

0
点赞
踩
0

收藏

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

　　本文摘自百度文库　　还是提到了一个关于网页制作很古老的问题，浮动的清除。　　虽然看过一些资料介绍说能不用浮动就尽量不要用，但对定位不是很熟的我来说，浮动就不能不用了；既然惹上这个麻烦，就得想个办法进行解决。　　在论坛里搜索，可以看到有很多这方面的介绍，看过一些总结有一下几种方法：　　1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；　　2、使用:a...
复制链接

扫一扫