zoukankan      html  css  js  c++  java
  • css清除浮动的8种方法

    参考来源:http://www.jb51.net/css/173023.html

    常用方法如下:

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    /*清除浮动代码*/ 
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
    .clearfloat{zoom:1} 
    </style> 
    <div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 

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

    优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 

    缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。 

    建议:推荐使用,建议定义公共类,以减少CSS代码。 

  • 相关阅读:
    基于vite2的react脚手架
    基于react hooks,zarm组件库配置开发h5表单页面
    IDEA远程debug
    test wizdeploy
    使用python完成接口自动化
    测试左移和测试右移
    性能测试监控
    网络基础面试题
    (案例8)java性能定位
    Jmeter分布式测试
  • 原文地址:https://www.cnblogs.com/dontes/p/7028404.html
Copyright © 2011-2022 走看看