zoukankan      html  css  js  c++  java
  • 用after伪类清除浮动

    以前总是加一个<div sytle="clear:both"></div>来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器
    .clearfix:after{
         content:".";        
         display:block;        
         height:0;        
         clear:both;        
         visibility:hidden;        

    }

    为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码

    .clearfix{zoom:1}

    一般情况下,如果父层内部有浮动(float)可能导致父层的高度为0,加上clearfix后就行了:
    <style type="text/css">
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

    .clearfix{zoom:1}
    .parent{120px;}
    .left{float:left;display:inline;}
    .right{float:right;display:inline;}
    </style>

    <div class="clearfix">
     <div class="left">
          left
        </div>
        <div class="right">
          right
        </div>
    </div>

  • 相关阅读:
    k8s
    vue-element-admin实现模板打印
    MAC系统命令
    思维导图工具
    前端如何渲染几万条数据不卡住页面?
    Echar使用案例
    .Net 相关报错解决方案
    Windows 操作技巧
    Docker&K8s
    微信网页授权原理分析
  • 原文地址:https://www.cnblogs.com/yingsu/p/7261904.html
Copyright © 2011-2022 走看看