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

Posted 2020-10-16 蓝心高飛

 1float浮动的属性值

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

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

实例：

父元素：

1 #mainDiv{
2 border: 5px solid red;
3 width: 1349px;
4 height: 800px;
5 
6 }

 

子元素：

1 div {
2 width: 300px;
3 height: 400px;
4 float: left;
5 }

 

 3、浮动的影响

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

 

 4、解决清除浮动me总结

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

实例：

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