浮动元素容器的clearing问题
来源:互联网 发布:windows 基础编程 类型 编辑:程序博客网 时间:2024/05/16 06:54
1. 问题的由来
有这样一种情形:在一个容器(container)中,有两个浮动的子元素。
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
在浏览器中一运行,就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。
3.解决方法一:添加空元素
经典的解决方法,就是在浮动元素下方添加一个非浮动元素。
代码这样写:
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
原理是父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。
4.解决方法二:浮动的父容器
另一种思路是,索性将父容器也改成浮动定位,这样它就可以带着子元素一起浮动了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码,但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。
5.解决方法三:浮动元素的自动clearing
让父容器变得可以自动"清理"(clearing)子元素的浮动,从而能够识别出浮动子元素的位置,不会出现显示上的差错。
要做到这点,只要为父容器加上一条"overflow: hidden"的CSS语句就行了。代码这样写:
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个,一个是IE 6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。
6.解决方法四:能不能通过CSS语句添加子元素呢,这样就不用修改HTML代码了?
回答是可以的,我们知道CSS语句中有一个:after伪选择符,就可以在父容器的尾部自动创建一个子元素,这正好符合我们的需要。
下面的代码参照了lifesinger的写法:
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名称,"content:"020";"是在父容器的结尾处放一个空白字符,"height: 0;"是让这个这个空白字符不显示出来,"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是,:after选择符IE 6不支持,也就是说上面的这段代码在IE 6中无效,这怎么办?
我们添加一条IE 6的独有命令"zoom:1;"就行了,这条命令的作用是激活父元素的"hasLayout"属性,让父元素拥有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。
7.最终代码
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
有这样一种情形:在一个容器(container)中,有两个浮动的子元素。
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
在浏览器中一运行,就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。
3.解决方法一:添加空元素
经典的解决方法,就是在浮动元素下方添加一个非浮动元素。
代码这样写:
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
原理是父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。
4.解决方法二:浮动的父容器
另一种思路是,索性将父容器也改成浮动定位,这样它就可以带着子元素一起浮动了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码,但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。
5.解决方法三:浮动元素的自动clearing
让父容器变得可以自动"清理"(clearing)子元素的浮动,从而能够识别出浮动子元素的位置,不会出现显示上的差错。
要做到这点,只要为父容器加上一条"overflow: hidden"的CSS语句就行了。代码这样写:
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个,一个是IE 6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。
6.解决方法四:能不能通过CSS语句添加子元素呢,这样就不用修改HTML代码了?
回答是可以的,我们知道CSS语句中有一个:after伪选择符,就可以在父容器的尾部自动创建一个子元素,这正好符合我们的需要。
下面的代码参照了lifesinger的写法:
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名称,"content:"020";"是在父容器的结尾处放一个空白字符,"height: 0;"是让这个这个空白字符不显示出来,"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是,:after选择符IE 6不支持,也就是说上面的这段代码在IE 6中无效,这怎么办?
我们添加一条IE 6的独有命令"zoom:1;"就行了,这条命令的作用是激活父元素的"hasLayout"属性,让父元素拥有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。
7.最终代码
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
0 0
- 浮动元素容器的clearing问题
- 浮动元素后的非浮动元素问题
- overflow:auto;子元素浮动后父容器高度自适应问题
- Css_浮动元素外层容器无高度的解决办法
- 浮动元素的垂直居中问题
- 浮动元素引起的问题和解决方法
- 浮动元素引起的问题和解决办法?
- 浮动元素问题
- 探讨CSS中元素浮动后,文字环绕于浮动元素周围,没有与浮动元素重合的问题
- CSS中clear清除元素容器浮动
- CSS中clear清除元素容器浮动
- 浮动元素没有撑开父容器
- 三种方法解决浮动元素父容器高度自适应问题
- 关于浮动元素排版问题
- STL容器的删除元素问题
- C++容器元素遍历的问题
- STL容器的删除元素问题
- IE6浮动元素的双倍边距问题
- 分布式消息系统Kafka介绍
- Markdown中插入数学公式的方法
- extjs window控件closeAction详细说明
- WEB前端第一课之ps
- 金庸武侠小说之我的见解
- 浮动元素容器的clearing问题
- 实例学习gcc+gdb+make
- linux系统下初试编写汇编程序
- 改变世界的17个等式
- map-hdu 4287-Intelligent IME-想法题
- 滤波器设计指标
- 手把手教你做iOS推送
- HDU - 5053 the Sum of Cube
- 数字信号处理中各种频率关系