`

html设置float后没有高度解决

阅读更多
http://www.chinaz.com/design/2008/1024/41932.shtml

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。
这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

以下为引用的内容:
#outer:after{ 
     content:"."; 
     height:0; 
     visibility:hidden; 
     display:block; 
     clear:both; 
}



http://slide.tech.sina.com.cn/d/slide_5_453_44349.html#p=1
新浪的图片就是在div和里面的ul分别加入 .clearfix,  将clearfix设置为:
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;}
分享到:
评论

相关推荐

    浮动层自动适应高度的解决方法

    先看一个例子: HTML: 复制代码代码如下: <ul> <li></li> <li></li> </ul> CSS: 复制代码代码如下: ul { ...在各个浏览器中的效果一致: 可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是

    使用CSS的overflow属性防止float撑开div的方法

    例如:div元素内的两个子元素p都float:left,外面的div会变成没有高度,此时该怎么办呢?通常解法是在排版流里面的元素加一个after的伪元素,将它设成display: block以及clear:both即可解决。 CSS Code复制内容到...

    定义内联元素span的最小高度问题

    曾经有朋友问:为什么给用css给span定义高度和宽度后,它的宽度和高度仍然没有变化,好像失效了一样? 其实这个问题很简单——先要认清span的属性,因为span属于内联元素,而内联元素是忽略宽度和高度的,明白了这...

    css兼容性问题总结笔记

    10. IE6中min-height 最小高度不识别的解决办法 6 11. IE6中min-width 最小宽度不识别的解决办法 6 12. IE6中居中布局问题 7 13. IE6 Png图片不透明问题 7 14. 移除超级链接的虚线 7 15. 隐藏水平滚动条 7

    CSS网页布局中的最小高度问题的解决方法

    假定有二个BOX,我们需要它的最小高度为150...最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定 最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定<

    IE6特有bug兼容性问题整理

    要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用...

    【HTML&&CSS】CSS解决高度塌陷问题&&实现简单的导航效果

    下面这段代码是实现简单的导航效果: 在这里插入代码片 ... float:left; margin-right:5px; } .nav ul li a{ width:100px; height:30px; color:#fff; display:block; l

    ExtAspNet_v2.3.2_dll

    -Grid的BoundField增加NullDisplayText属性,用于处理数据库中的null值,如果没有设置则默认为空字符串。 -修正DatePicker中的一个bug(31/01/2010将会返回NULL)使用DateFormatString来生成SelectedDate属性...

    关于css兼容性问题及一些常见问题汇总

    1.有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。 解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定 eg:(ie会...

    BFC实现自适应两栏布局

    在解决高度塌陷的问题的时候,通过BFC的触发条件之一触发BFC后,在计算BFC的高度的时候,浮动元素就可以参与计算了。 BFC(Block Formatting Contexts)即块级格式化上下文,首先得是块元素,其次具备触发条件之一的才...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    Personal-Page:我的个人页面的源代码

    该导航栏默认情况下存在一些问题: 高度没有响应。 文本没有响应。 如果更改文本的某些值,Bootstrap会丢失所有导航条格式。 文本的对齐方式。 默认对齐方式在所有左侧。 这个想法以及我如何解决。 由于Bootstrap的...

    css入门笔记

    保持设置的宽高 box-sizing:border-box; 1、内边距 padding 取值:left左 right右 top上 bottom下 px (%)少用 取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色...

    jquery插件使用方法大全

    它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...

    超级有影响力霸气的Java面试题大全文档

    多态性语言具有灵活、抽象、行为共享、代码共享的优势,很好的解决了应用程序函数同名问题。 5、String是最基本的数据类型吗?  基本数据类型包括byte、int、char、long、float、double、boolean和short。  java....

    java 面试题 总结

    多态性语言具有灵活、抽象、行为共享、代码共享的优势,很好的解决了应用程序函数同名问题。 2、String是最基本的数据类型吗? 基本数据类型包括byte、int、char、long、float、double、boolean和short。 java.lang....

Global site tag (gtag.js) - Google Analytics