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

    1.额外标签法

    <style>
       .main{
            width: 500px;
            background-color: #A9A9A9;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #FF69B4;
        }
        .right{
            float: right;
            width: 300px;
            height: 400px;
            background-color: #FFC0CB;
        }
        .clear{
            display: block;
            clear: both;
         }
    </style>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <span class="clear"></span>
    </div>

    2.使用overflow

    <style>
    	.main {
    		 500px;
    		background-color: #A9A9A9;
    		overflow: hidden;
    	}
    
    	.left {
    		float: left;
    		 200px;
    		height: 200px;
    		background-color: #FF69B4;
    	}
    
    	.right {
    		float: right;
    		 300px;
    		height: 400px;
    		background-color: #FFC0CB;
    	}
    </style>        
    <div class="main">
    	<div class="left"></div>
    	<div class="right"></div>
    </div>        
    

      3.伪元素清除浮动

    /* 伪元素属于行内元素,没有宽高,需要转化 */
    /* 正常浏览器清除浮动 */
    .clearfix:after{
         content: "";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
    }
    /* ie6清除浮动 * 仅ie7以下版本识别*/
    .clearfix{
         *zoom: 1;
    }        

    4.双伪元素清除浮动

    /* 双伪元素清除浮动 */
    /* 正常浏览器清除浮动 */
    .clearfix:before, .clearfix:after{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    /* ie7以下专用 */
    .clearfix{
        *zoom: 1;
    }

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

     
  • 相关阅读:
    iOS UILable 自定义高度 用masony适配
    iOS上架所需图片大小明细
    GCD倒计时
    iOS 小知识汇总
    七、Swift 枚举 Enumerations
    C语言深度剖析笔记
    六、闭包 Closures
    经济学常识
    Mac小技巧
    五、函数 Functions
  • 原文地址:https://www.cnblogs.com/dch0/p/11570422.html
Copyright © 2011-2022 走看看