前端修炼手札:清除浮动的四种方法
2014-05-16 11:50
183 查看
我们在页面布局时,基本上都避免不了使用float,但由此也会引发一些问题,尤其是在容器高度不固定时,此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的,那么由于内部的元素脱离了文档流,父容器就不能被撑开了。如果父容器设置的有背景或者边框的话,此时就不能正常显示了,另外,父容器下边的其他容器或内容也会跟着向上“浮”, 占据上面的子容器应该占据的位置。那么,这时就需要清除浮动了。
这里总结的几种的方法主要就是针对类似于上面的问题的,但也不仅限于以上问题。主要有以下几种方法:
1、设置空标签
2、父容器设置display: inline-block
3、父容器设置overflow值auto或hidden
4、clearfix方法
下面就根据一个例子分别看一下吧。
例子:
Html结构是这样的:
不清除浮动时的效果:
理想效果:
下面就分别用几种方法实现一下:
方法一:设置空标签
我们在容器cont1的最后面添加空标签clear:
方法二:父容器设置display: inline-block
只需对父容器添加css属性display: inline-block; 就行了
只需对父容器添加属性overflow: auto; 或者 overflow: hidden;
此时需要写一个clearfix的类:
以上就是总结的几种清除浮动的方法,欢迎大家提出更好的解决方法。
转自(WEB前端开发)
相关文章推荐
- 浮动的清除 -- 四种方法
- 关于清除浮动的四种方法
- CSS四种清除浮动的方法
- 清除浮动四种方法
- 清除浮动的四种方法(详解)
- 关于清除浮动的四种方法
- 清除浮动——让包围元素包含浮动元素的四种方法
- 关于清除浮动的四种方法
- 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点
- 清除浮动的四种方法
- 菜鸟备忘录[CSS3]——清除浮动的四种方法
- CSS 清除浮动的四种方法
- 两种清除浮动的方法
- CSS教程:清除浮动方法大全
- CSS 清除浮动方法大全
- css 清除浮动的新方法
- MY123流氓软件四种清除方法
- CSS清除浮动元素方法
- DIV 再论清除浮动的空方法
- 清除浮动的最优方法~为需要清浮动的标签加上overflow~~论坛推荐~!!!