转自:http://hi.baidu.com/sqying/blog/item/cc0ce111771008c5a6ef3fb0.html
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
HTML4STRICT代码:
-
<div style="width:200px;border:1px 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>
显示的结果如下:
容器DIV没有被撑开
大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?
以前我都是用这样的方法来解决:
HTML4STRICT代码:
-
<div style="width:200px;border:1px 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,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。
昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。
首先设置这样的CSS:
CSS代码:
-
.clearfix:after {
-
content: ".";
-
display: block;
-
height: 0;
-
clear: both;
-
visibility: hidden;
-
}
然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:
HTML4STRICT代码:
-
<div style="width:200px;border:1px solid red;" class="clearfix">
-
<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>
在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;
-
}
-
/* Hides from IE-mac \*/
-
* html .clearfix {height: 1%;}
-
/* End hide from IE-mac */
因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。
测试一下,果然大功告成。
分享到:
相关推荐
终止 DIV 的 float 属性,在 css 里面定义一个样式 复制代码代码如下: .clear_float { clear: both; } 页面使用时加上一行 <div class=clear_float></div> 后面的 div 将不再 float。
相关文章:https://www.jb51.net/css/divcss-4952.html ...额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就
子Div撑开父Div,可以设置父元素overflow以及zoom,或者是父元素也是设置浮动效果,也可以在添加一个子元素,并设置clear样式
加入float:left以后会使随后跟上的BUTTON标签跟在DIV后面,这是就须在两者之间加入一个CLASS为clear的DIV,下面的示例,大家可以看看
例如:div元素内的两个子元素p都float:left,外面的div会变成没有高度,此时该怎么办呢?通常解法是在排版流里面的元素加一个after的伪元素,将它设成display: block以及clear:both即可解决。 CSS Code复制内容到...
本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...
clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-...
这次遇到个类似的控件,一个父div带边框,里面就是一个一个float的子div,需要换行的时候加了一个 float:left; height:0px; width:100%; overflow:hidden; font:0pt;/* 蛋疼的IE6你懂的*/ 的伪换行符div 后面还...
就是在父容器的添加一个子容器,该子容器位于父容器中子容器列表的最后。并且给该子容器添加一个样式:clear:both;。就这么简单,你就可以让你的父容器自适应浮动子容器的高度了。
1、结尾处加空div标签 clear:both 复制代码代码如下:.div1{background:#000080;border:1px solid red;}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;...
本文以div元素布局为例。教程开始: ...浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。 例如,假设上图中的div2浮动,那么它将脱离标准流,但div1、div3、div4仍然在
<div style="float:left;"> <div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层,利用该层的高度控制广告层上下的位置。--></div> <div style="float:left;height:250px;width:250px;clear:...
在写HTML代码的时候,创造在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: 复制代码代码如下: ...
复制代码代码如下: <div id=”box_left”></div> <div id=”box_right”></div> <div id=”box_bottom></div> 这个结构,box_left和box_right左右浮动,box_bottom有border,在IE下显示都是好的,但是Fierfox不显示...
复制代码代码如下: <div class=”header”> <div class=”header_left”>header_left</div> <div class=”header_right”>header_right</div> </div> .header{width:1000px;background:red;} .header .header_left{...
我们在用CSS布局网页的时候常常会用的float浮动,为了兼容各浏览器,往往会在最后一个浮动后面加上一个空的div用来清除浮动,如:<div class=clear></div>,但是今天发现,只要设置了padding值的元素内有<div class=...
clear:both; word-break:break-all; word-wrap:break-word; } 复制代码代码如下: ”code” class=”css”><!–width指定每个div占据的宽度–></pre>.custom_div{height: 23px;width: 50px;line-height: 23px;...
1、CSS中的clear有四个参数: none:允许两边都可以浮动。 left:不允许左边有浮动。 right:不允许右边有浮动。 both(默认);不允许有浮动。 2、一开始在CSS中clear浮动... float:left; clear:none; } #msg_Div{