By

Contents
  1. 1. 清除浮动3种方法

清除浮动3种方法

  • 父级上增加属性overflow：hidden
  • 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
  • 使用成熟的清浮动样式类，clearfix
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <style type="text/css">
    	.list{
    		width:210px;
    		/* height:400px; */
    		border:1px solid #000;
    		margin:50px auto 0;
    		list-style:none;
    		padding:0;
    		/* 
    		第一种清除浮动的方法：
    		overflow: hidden; 
    		*/
    	}
    	.list li{
    		width:50px;
    		height:50px;
    		background-color:gold;
    		margin:10px;
    		float:left;
    	}
    	/* .clearfix:before{
    		content:"";
    		display:table;
    	}
    	
    	
    	.clearfix:after{
    		content:"";
    		display:table;
    		clear:both;
    	} */
    	/* 以上两个合并的写法(zoom是为了兼容IE)*/
    	.clearfix:before,.clearfix:after{
    		content:"";
    		display:table;
    	}
    	.clearfix:after{
    		clear:both;
    	}
    	.clearfix{
    		zoom:1;
    	}
    </style>