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>

     
  • 相关阅读:
    JDK动态代理
    回顾反射机制Method
    静态代理和动态代理
    使用jQuery实现ajax请求
    ajax函数
    事件 on
    函数2
    pytest-mock 调试实例
    Linux自启动tomcat
    第一次做性能测试
  • 原文地址:https://www.cnblogs.com/dch0/p/11570422.html
Copyright © 2011-2022 走看看