.clearfix:after clear:both
2013-06-25 11:33
89 查看
.clearfix:after clear:both
在写HTML代码的时候,创造在Firefox等符合W3C标准 的涉猎器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
运行这段代码,大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丧失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?
以前我都是用这样的法子 来解决:
我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div> 。这样,其实就在最后增加了clear的动作。
但是,我总感觉,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制 换一行显示。所以,我一直在寻找更好的解决措施。
-----------------下面没看懂--------------------------------
解决的措施:
首先设置这样的CSS:
CSS代码:
代码:
然后,我们再修正原本的HTML代码,让外部的容器DIV来应用这个CSS:
HTML4STRICT代码:
在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原本,这个clearfix的CSS应用了after这个伪对象,它将在利用 clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为潜藏 。这样就达到 了撑开容器的目标啦。
但是,在文章中说,Windows IE并不支撑这样做。所以要让IE也完善显示,则必须 在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
因为转义字符"\",Mac IE涉猎器会漠视 掉这段Hack,但Windows IE不会,它会利用 * html .clearfix {height: 1%;} 来达到 撑开DIV容器的目标(貌似Mac IE没有措施解决这个问题,不过幸好用户数量是在是太少了,Safari支撑就可以了:p)。
在写HTML代码的时候,创造在Firefox等符合W3C标准 的涉猎器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="border:2px solid red;"> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> </div>
运行这段代码,大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丧失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?
以前我都是用这样的法子 来解决:
<div style="border:2px solid red;"> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div> </div>
我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div> 。这样,其实就在最后增加了clear的动作。
但是,我总感觉,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制 换一行显示。所以,我一直在寻找更好的解决措施。
-----------------下面没看懂--------------------------------
解决的措施:
首先设置这样的CSS:
CSS代码:
代码:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
然后,我们再修正原本的HTML代码,让外部的容器DIV来应用这个CSS:
HTML4STRICT代码:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix {height: 1%;}
在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原本,这个clearfix的CSS应用了after这个伪对象,它将在利用 clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为潜藏 。这样就达到 了撑开容器的目标啦。
但是,在文章中说,Windows IE并不支撑这样做。所以要让IE也完善显示,则必须 在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix {height: 1%;}
因为转义字符"\",Mac IE涉猎器会漠视 掉这段Hack,但Windows IE不会,它会利用 * html .clearfix {height: 1%;} 来达到 撑开DIV容器的目标(貌似Mac IE没有措施解决这个问题,不过幸好用户数量是在是太少了,Safari支撑就可以了:p)。
相关文章推荐
- clear both or overflow hidden , a clearfix solution
- overflow :hidden 和 clear:both 与 clearfix撑起高度坍塌的父元素应用
- .clearfix:after(清除浮动)中各个属性及值详细解说
- 什么是 clearfix ?
- 简述clear和clearfix
- Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动
- css兼容IE6/IE7/FF的通用方法和著名的Clearfix Hack
- 解决CSS中float:left后需要clear:both清空的繁琐步骤
- clear:both的理解
- 巧用clear:both
- clearfix:after 清除css浮动
- CSS中clear属性的both、left和right浅析
- A new micro clearfix hack
- float 浮动 《1》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
- 关于clearfix
- html中clearfix:after也clear:both有什么区别?
- BFC----Clearfix
- 教大家如何清除浮动不用另外在div中写clear:both
- CSS 的overflow:hidden; 、clear:both;属性详细解释
- 小程序开发中clear:both对float的作用