2020-10-21 css12清除浮动/css书顺序

清除浮动

一.清除浮动
在父级没高度，子盒子浮动，影响到布局时
为了解决父级元素因为子级浮动引起内部高度为0的问题
清除浮动后，父级能自动检测子级高度
解决方法：
1.额外标签法（添加了多的空标签，结构差）
找到浮动的最后一个元素，在其末尾添加一个空标签如：

<div style="clear:both"></div>

或：

<div class="clear"><div>

.clear{
	clear:both;
	}

2.父级添加overflow属性
给父级添加:overflow为hidden/auto/scroll

3.使用after伪元素清除浮动
:after方式为空元素额外标签的升级版，不用单独标签
使用方法：

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
	

.clearfix{
	*zoom:1;
	}		/*ie6,7专有*/

4.使用双伪元素清除
使用方法：

.clearfix:before, .clearfix:after{
	content:"";
	display:table;
	}
	.clearfix:after{
	clear:both;
	}
	.clearfix{
	*zoom:1;
	}

二.css书写顺序
1.布局定位属性（dispaly/position/float/clear/visibility/overflow）>自身属性（width/height/margin/border/background)>文本属性（color/font/text-decoration/text-align)>其他属性（content/cursor/border-radius/box-shadow/text-shadow）