zoukankan      html  css  js  c++  java
  • 清除浮动的方法(float)

    方式一:
    额外标签法:给浮动的元素后面新增加一个清除浮动的盒子
    例如:
    <div style="float: left">浮动盒子</div>
    <div style="float: left">浮动盒子</div>
    <div style="clear: both">清除浮动盒子</div>  <!--新增清除浮动的标签-->
    
    方式二:
    给父元素添加overflow属性方法,给父级添加 overflow 为 hidden|auto|scroll都可以实现
    例如:
    <div style="overflow: hidden">
    <div style="float: left">浮动盒子</div>
    <div style="float: left">浮动盒子</div>
    </div>
    
    方式三:
    使用 after 伪元素清除浮动,:after 方式为空元素的升级版,好处是不用单独添加标签
    缺点::after不支持IE6、7,可以使用zoom:1;
    例如:
    .clearfix:after{
    content:"";
    display:block;
    clear:both;
    }
    .clearfix{
    *zoom:1;  /* IE6、7专用清除浮动方法 */
    }
    <div class="clearfix">
    <div style="float: left">浮动盒子</div>
    <div style="float: left">浮动盒子</div>
    </div>
    

      

  • 相关阅读:
    l1-010
    l1-009
    L1-008修改
    l1-008
    Codeforces Round #406 (Div. 2)
    求N!的长度【数学】 51nod 1058 1130
    51nod 1090 & 1267 【二分简单题】
    Codeforces Round #405 (Div. 2)
    Codeforces Round #404 (Div. 2)
    PAT 天梯赛真题集(L2、L3)
  • 原文地址:https://www.cnblogs.com/qtbb/p/11433172.html
Copyright © 2011-2022 走看看