前端问题(一) 清除浮动

浮动

为什么要清除浮动，浮动会带来什么影响

在父元素没指定高度，且子元素浮动情况下，父元素不占有位置，下边的块级元素会与当前子元素成为一行,从而占有当前块

清除浮动方法

1. 额外标签法
   子元素添加额外标签

      .clear {
      	clear: both;
      }
   

2. 给父级添加 overflow

    overflow: hidden;

3. 父级元素添加after伪元素

  	/*声明清除浮动的样式*/
  	.clearfix:after {
  		content: "";
  		display: block;
  		height: 0;
  		visibility: hidden;
  		clear: both;
  	}
  	.clearfix {
  		*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
  	}

4. 父级添加双伪元素

	/*声明清除浮动的样式*/
  	.clearfix:before,
  	.clearfix:after {
  		content: "";
  		display: table;
  	}
  	.clearfix:after {
  		clear: both;
  	}
  	.clearfix {
  		*zoom: 1;
  	}