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:0;
width:0;
wisibility:hidden;
}