码迷,mamicode.com
首页 > 其他好文 > 详细

围住浮动元素的三种方法

时间:2015-05-10 13:01:32      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:杭州   前端   css   css3   

方法一 :为父元素应用 overflow:hidden

实际上,overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容器剪切掉。除此之外,overflow:hidden还有另一个作用,即它能可靠地迫使父元素包含其浮动的子元素。

方法二:同时浮动父元素

第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来

方法三:添加非浮动的清除元素

就是简单地在HTML标记中添加一个子元素,并给它应用clear属性。由于没有默认的样式,不会引入多余的空间,div元素很适合这个目的。


目前最流行的清除浮动的方法,写入一个clearfix的类:

.clearfix:after{ 

                          content: " ";

                          display:block;

                           height:0;

                           visibility:hidden;

                           clear:both;}

.clearfix{

                      * zoom:1}

*zoom:1;是为了出发hasLayout。

关于hasLayout 介绍点击http://baike.baidu.com/link?url=U_3B9202pp9xc357Ge9u7aS_T1WmUYZzVJ8ef4TYxqUjtrIZ-4GGbFT86csIfNHsSfpFQXlLFRlL0JjhPR7dEK

1.display:block使生成的元素以块级元素显示

2.height:0 ;避免生成的元素内容破坏原有的布局的高度。

3.visibility:hidden使生成内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互

4.content:“”;是使内容部分为空



围住浮动元素的三种方法

标签:杭州   前端   css   css3   

原文地址:http://blog.csdn.net/u012491775/article/details/45618733

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!