zoukankan      html  css  js  c++  java
  • 清除浮动最简单的方法

    Ghost 发表于 [2007-07-12 23:32]

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

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

    ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}<br/>
    li{float:left;80px;height:80px;background-color:#83B1DF;}<br/>
    .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}<br/>
    .overflow{overflow:auto;zoom:1;background-color:#43FF73;}
    <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准备的。

    完整的Demo

    注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。例子可以看这里Demo2
    这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。

    .overflow{
    height:auto;
    _height:200px;
    min-height:200px;
    overflow:auto;
    _overflow:visible;
    }

    文章地址:http://www.cssforest.org/blog/index.php?id=36

  • 相关阅读:
    basic-linux
    巧用border属性
    git常用操作笔记
    如何删除github里的项目
    常用css3属性的ie兼容查看
    新建pc端页面的模板
    HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
    进程和线程
    C++对象模型---第 4 章 Function语意学
    C++对象模型---第 3 章 Data语意学
  • 原文地址:https://www.cnblogs.com/cnsg/p/2749840.html
Copyright © 2011-2022 走看看