float 浮动---设置元素向哪个方向浮动

一、float 浮动—设置元素向哪个方向浮动

none 默认值，不浮动—写不写没有区别
left 左浮动–元素向左方向浮动
right 右浮动–元素向有方向浮动
浮动会使元素脱离文档流----造成父元素高度塌陷
当元素使用了浮动属性并且属性值不为none时，此刻这个元素就在父元素中不会占据空间,造成父元素的高度变小
当一个元素在没有设置固定高度的情况，此元素中的所有子元素都使用了浮动属性并且属性值不为none时，那这些子元素在父元素中就不为会占据空间，最终导致父元素高度塌陷为0

二、清除浮动：清除浮动带来的高度塌陷的影响的方法

1、不灵活：给浮动元素的父元素添加固定高度—添加浮动元素中高度最高的浮动元素的高度给父元素
2、相对灵活：给浮动元素的父元素添加

 overflow:hidden;

使用浮动：

3.万能清楚法。

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

	要浮动，一窝都浮动：当一个元素中的其中一个子元素使用了浮动，那么这个元素中的所有子元素就都要浮动
	浮动元素是会显示在没有浮动的元素的上方，当浮动元素与没有浮动的元素发生位置重合，就只能看到浮动的元素
	当一行之上剩余的空间不足以容纳下所有的浮动元素显示，浮动元素就会换行到下一行显示，直到能容纳下所有的元素显示为止
	浮动给元素会产生一个块级框(任何元素都可以设置宽高)，不论其本身是何种元素
	元素浮动之后，在没有设置固定宽高和没有内容的情况下，宽高为0
特殊应用：使用浮动可以实现文字围绕在图片周围显示
	当一个元素中有图片和文字，给图片使用浮动，就可以实现文字围绕在图片周围显示