CSS知识点:清除浮动
2014-09-21 22:25
323 查看
开场白
我们平时工作中,很容易遇到浮动效果。一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化。这就是最基本的浮动效果。下图的百度搜索结果就是一个简单的例子。
什么是CSS清除浮动?
借用W3C的定义。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。(其实简单理解就是浮动的元素就是木板浮在水面上一样,和水平面不在一个平面上,因此两个平面的布局不会互相影响,但是水平面的岸边还是会限制木板的活动区域的。)
以下是一个简单的例子,trapper容器没有“包住”浮动的元素。
清除浮动方法
方法一:带clear属性的空元素(简单,兼容性不错,但是增加了没用的html元素,如果浮动元素后边还有相邻的元素,可以给相邻的元素直接加上clear属性。)
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
方法三:给浮动的元素的容器添加浮动(将容器和内部内容浮动到同一个平面上,这样影响了布局,整体浮动不推荐)
方法四:使用CSS的:after伪元素
结合 :after 伪元素和 IEhack , IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
推荐使用使用伪元素的方式解决元素浮动问题。
结束语
您有收获吗?
希望我没有浪费您的时间。
谢谢您的耐心阅读。
如有错误或者补充及时更正。
我们平时工作中,很容易遇到浮动效果。一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化。这就是最基本的浮动效果。下图的百度搜索结果就是一个简单的例子。
什么是CSS清除浮动?
借用W3C的定义。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。(其实简单理解就是浮动的元素就是木板浮在水面上一样,和水平面不在一个平面上,因此两个平面的布局不会互相影响,但是水平面的岸边还是会限制木板的活动区域的。)
以下是一个简单的例子,trapper容器没有“包住”浮动的元素。
.trapper{ background-color: gray; border: solid 1px black; } .left{ float: left; height:200px; width:200px; border:solid 1px red; } .right { float: right; height:200px; width:200px; border:solid 1px green; } <div class="trapper"> <div class="left"></div> <div class="right"></div> </div>
清除浮动方法
方法一:带clear属性的空元素(简单,兼容性不错,但是增加了没用的html元素,如果浮动元素后边还有相邻的元素,可以给相邻的元素直接加上clear属性。)
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
.trapper{ background-color: gray; border: solid 1px black; } .left{ float: left; height:200px; width:200px; border:solid 1px red; } .right { float: right; height:200px; width:200px; border:solid 1px green; } <div class="trapper"> <div class="left"></div> <div class="right"></div> <div class="clear"></div> </div>
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
.trapper{
background-color: gray; border: solid 1px black; overflow:hidden; *zoom:1; } .left{ float: left; height:200px; width:200px; border:solid 1px red; } .right { float: right; height:200px; width:200px; border:solid 1px green; } <div class="trapper"> <div class="left"></div> <div class="right"></div> </div>
方法三:给浮动的元素的容器添加浮动(将容器和内部内容浮动到同一个平面上,这样影响了布局,整体浮动不推荐)
方法四:使用CSS的:after伪元素
结合 :after 伪元素和 IEhack , IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.trapper{
background-color: gray; border: solid 1px black; overflow:hidden; *zoom:1; } .left{ float: left; height:200px; width:200px; border:solid 1px red; } .right { float: right; height:200px; width:200px; border:solid 1px green; }
.clearfix { /* 触发 hasLayout */ zoom: 1; }
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
<div class="trapper clearfix"> <div class="left"></div> <div class="right"></div> </div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
推荐使用使用伪元素的方式解决元素浮动问题。
结束语
您有收获吗?
希望我没有浪费您的时间。
谢谢您的耐心阅读。
如有错误或者补充及时更正。
相关文章推荐
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
- CSS清除浮动
- css清除浮动各种方法
- CSS技巧(一):清除浮动
- CSS 浮动副作用 ,清除浮动
- CSS中的浮动与清除
- css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动
- 第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩
- CSS清除浮动各种方法
- css 怎么清除浮动
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- CSS 浮动和清除
- CSS清除浮动的六种方法
- css清除浮动float的三种方法总结
- css之使用clearfix类清除浮动
- CSS清除浮动
- CSS清除浮动
- 8种CSS清除浮动的方法优缺点分析
- css清除浮动
- CSS清除浮动的的三种方式