zoukankan      html  css  js  c++  java
  • css 清除浮动

    清除浮动主要说三种方法。

    第一种:clear:both

    <style>
        .clear{
            clear:both;
        }
        .f-left{
            float:left;
        }
    </style>
    
    <div class="outer">
        <div class="div1 f-left">1</div>
        <div class="div2 f-left">2</div>
        <div class="div3 f-left">3</div>
        <div class="clear"></div>
    </div>

    对于第一种方法:

      优点:简单、代码少、浏览器支持好、不容易出现怪问题 

      缺点:要增加很多空的div

    第二种:父级元素添加overflow:hidden

    <style>
        .over-flow{
            overflow:hidden;
        }
    </style>
    
    <div class="outer over-flow"> //这里添加了一个class
        <div class="div1 f-left">1</div>
        <div class="div2 f-left">2</div>
        <div class="div3 f-left">3</div>
    </div>

    第三种:after伪类

    <style>
    .clearfix:after {
      content: '.';
      display: block;
      visibility: hidden;
      height: 0;
      line-height: 0;
      font-size: 0;
      clear: both;
    }
    .clearfix {
      zoom: 1; /*主要兼容IE*/
    }
    </style>
    
    <div class="div1 clearfix"> 
         <div class="left">Left</div> 
          <div class="right">Right</div> 
    </div>

    对于第三种:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题 。

  • 相关阅读:
    GCD (hdu 5726)
    1092
    D. Puzzles(Codeforces Round #362 (Div. 2))
    A. Lorenzo Von Matterhorn
    Polyomino Composer(UVA12291)
    Optimal Symmetric Paths(UVA12295)
    菜鸟物流的运输网络(计蒜客复赛F)
    1193
    1119
    1374
  • 原文地址:https://www.cnblogs.com/peiyuanming/p/5029461.html
Copyright © 2011-2022 走看看