CSS学习笔记7浮动

标准流
标签按照默认的方式排列就是标准流。
为什么要浮动
浮动可以改变标签默认的排列方式。
网页布局第一准则：多个块级元素纵向找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框

浮动特性

1.浮动会脱离标准流（脱标）
脱离标准流的控制，移动到指定位置。
浮动的盒子不再保留原先的位置。
2.浮动会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性

浮动经常和标准流的父级搭配使用
先用标准流父级上下排列，之后内部元素使用浮动左右排列，符合网页布局的第一准则。

清除浮动
选择器 {clear : 属性值;}

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

清除浮动方法

1.额外标签法也称为隔墙法，是W3C推荐的做法。
在浮动元素末尾加一个空标签。（这个元素必须是块级元素）
2.父级添加overflow属性
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
overflow:hidden溢出隐藏。
3.父级添加after伪元素
after伪元素法

<style>
	.clearfix:after {
		content: "";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	.clearfix {
		/*TE6、7专有*/
		*zoom:1;
	}
</style>

然后再将clearfix样式属性添加到父元素中

4.父级添加双伪元素

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

然后再将clearfix样式属性添加到父元素中