float（浮动）的属性和使用方法

1float浮动的属性值

• 　　left:向左浮动
• 　　right:向右浮动

2、当父元素未浮动，子元素浮动时，就会造成浮动塌陷

实例：

父元素：

 #mainDiv{
 border: 5px solid red;
 width: 1349px;
 height: 800px;

 }

子元素：

 div {
 width: 300px;
 height: 400px;
 float: left;
 }

3、浮动的影响

• 在允许的空间并排显示，如果空间不够，会自动换行
• 改变块级元素占据一整行的特性，去掉多余的空间，把宽度缩成本身的内容的宽度或者设置的宽度
• 浮动会脱离正常的文档流
• 辅导会造成塌陷
• 内嵌元素浮动后将可以设置宽高

4、解决清除浮动me总结

• 在不浮动的前一个标签属性中设置清除浮动,但是只针对同一父级元素中的内容
• 借用一个块级元素单独设置clear：both
• 在父元素中设置整体要浮动的高度和。
• 让父元素与子元素一起浮动（不推荐）
• 为父元素设置overflow：hidden
• 为塌陷的父元素添加一个after属性，设置如下：

实例：

  div：after{
 clear：both;
 content：""; ////是没有内容的，content里面是可以设置内容，实际是不存的
 height:;
 width:;
 wisibility:hidden;
 }