对于IE7、FF、OP清除浮动的最优方法第1/2页

在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。 
css代码


代码如下:

ul{
list-style:none;
height:auto;
margin:0;p
adding:0;
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}
ul{
list-style:none;
height:auto;
margin:0;
padding:0;
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}

HTML代码


代码如下:

<div class="demo"> 
<ul class="overflow"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
</ul> 
</div> 
<div class="demo"> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
</ul> 
</div>

其中zoom是为了IE6准备的。

Overflow hack Demo|www.CSSForest.org

_uacct = "UA-780254-5";urchinTracker();

/**/

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Ghost Zhang

Email:lovej1bz@gmail.com

QQ:22168741

ORG:WebReBuild.ORG www.CSSForest.ORG

Blog:http://forest.blogbus.com

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • CSS清除浮动常用方法小结

    常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b

  • 一个老外弄的Clearing floats(清除浮动的方法)

    我常用的都是clear:both;方法,如 <div style="clear:both">    <div style="float:left"></div>   <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container {  border: 1px solid #00000

  • html清除浮动的6种方法示例

    使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添加浮动,会脱离文档流,按照指定的

  • css别忘记清除浮动clear:both

    用空标签清除 .clr {clear: both;} <div id="layout">     <div id="left">Left</div>     <div id="right">Right</div>     <p class="clr"></p> </div>使用 overflow 属性 #layout {overfl

  • 对于IE7、FF、OP清除浮动的最优方法第1/2页

    对于IE7、FF、OP清除浮动的最优方法第1/2页

    在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性.  css代码 复制代码 代码如下: ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left

  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

  • JS中使用 after 伪类清除浮动实例

    以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪

  • HTML clearfix清除浮动讲解

    HTML clearfix清除浮动讲解

    一.浮动的概念 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题. 浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动. 三.浮动的清除 1. clear属性的空标签 在浮

  • CSS清除浮动方法汇总

    清除浮动 //IE浏览器 .clearfloat{ zoom:1 } //其他浏览器 .clearfloat ; after{ display:bloak; clean:both; content:""; visibility: hidden; height:0 }

  • iOS中设置清除缓存功能的实现方法

    iOS中设置清除缓存功能的实现方法

    绝大多数应用中都存在着清楚缓存的功能,形形色色,各有千秋,现为大家介绍一种最基础的清除缓存的方法.清除缓存基本上都是在设置界面的某一个Cell,于是我们可以把清除缓存封装在某一个自定义Cell中,如下图所示: 具体步骤 使用注意:过程中需要用到第三方库,请提前安装好:SDWebImage.SVProgressHUD. 1. 创建自定义Cell,命名为GYLClearCacheCell 重写initWithStyle:(UITableViewCellStyle)style reuseIdentif

  • js实现从右向左缓缓浮出网页浮动层广告的方法

    本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

随机推荐