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

    总结了几点用于清除浮动的方法:

    1、对父级设置适合CSS高度

    一般设置高度需要能确定内容高度才能设置。

    2、clear:both清除浮动
    为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

    3、父级div定义 overflow:hidden
    对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

    4、建立清除浮动的类并应用在包含浮动的父级元素上

    .clearfix:after{
    content:'';
    display:block;
    height:0;
    overflow:hidden;
    clear:both;    
    }
    .clearfix{
     *zoom:1;  /*针对IE     
    }    

    改进版:

    .clearfix:after{
     content:'';
    display:table;
    clear:both;       
    }
    .clearfix{
    *zoom:1;
    }
    <div id="div1" class="clearfix">
      <div id="div11">div11</div>
      <div id="div12">div12</div>
      <div id="div13">div13</div>
    </div>
    <div id="div2" class="clearfix">
      <div id="div21">div21</div>
      <div id="div22">div22</div>
      <div id="div23">div23</div>
    </div>
    

    注:clearfix应该应用在包含浮动元素的父级元素上。  

  • 相关阅读:
    springboot设置请求超时
    Dockerfile 中 ENTRYPOINT 与 CMD 的区别
    iptables
    git commit statistics
    query spring mongo limit or skip test
    创建证书
    Linux基本网络配置
    k8s
    iis express添加网站,并启动
    用cmd的方式执行exe程序
  • 原文地址:https://www.cnblogs.com/beast-king/p/4562841.html
Copyright © 2011-2022 走看看