css元素浮动和清除浮动的方法

@[TOC]

标准文档流

	“标准文档流”（Normal Document stream），简称“标准流”，是指在不是使用其他与排列和定位相关的特殊css
规则时，各种元素的排列规则；

float属性-浮动

浮动：是元素脱离“标准文档流”。
	 该属性的值指出了对象是否浮动以及浮动的反向设置

float常用的属性值有left和right，分别为左浮动和有浮动

	float:left;
	float:right;
	float:none;(默认)
	float属性就是改变元素默认的显示方式，块级元素设置了float属性后，它将会不在独占一行

float属性的特性

1. 所有的元素都可以浮动
2. 具有float属性的元素在父标签中式不占空间
3. float能解决标签之间有间隙的问题

float对行内块元素的影响

1. float之后可以设置width和height属性
2. 支持margin和padding属性

float对块元素的影响

• 在没有设置宽高的情况下，浮动后，宽高是由内容撑开的
• 可以让块元素并排排列

浮动的应用场景

1. 图片有浮。
2. 文字环绕
3. 首字下沉
4. 水平菜单导航
5. 无表格首页

clear属性-清除浮动

	该属性的值指出了不允许有浮动对象的边，常用属性值both，设置时清除元素的全部浮动。

clear:both;(清除)
	 :left;(清除左浮动)
	 :right;(清除右浮动)
	 :none;(默认)

清除浮动的方法

1. 结尾外加空div标签，给添加clear：both； 优点：简单，代码少，浏览器支持好，不会容易出现怪问题； 缺点：如果页面需要清除浮动地方太多，多个div标签让人看起来不舒服
2. 父级div定义overflow：hidden; 原理：不能定义height，使用overflow:hidden;时，浏览器自动检查 浮动区域的高度。 优点：简单，代码少，浏览器支持好。 缺点：不能和position配合使用， 因为起初的尺寸会被隐藏 建议：只推荐没有使用postiion或对overflow：hidden；理解比较深的朋友使用
3. 父级div定义伪类:after 优点：不容易出现怪问题(目前)，大型网站都有使用，如：腾讯，网易，新浪等等。 缺点：IE8以上和非IE浏览器才支持,代码多。 建议：推荐使用，建议定义公共类，以减少css代码

	p:alter{
		content:"";
		display:block;
		height:0;
		visibility:hidden;
		clear:both;
	}
	p{
	zoom:1;
	}