CSS学习笔记（八）float属性

1、float属性的取值

• left 左浮动
• right 右浮动
• none 不浮动
• inherit 继承父元素的浮动

对块级元素使用左浮动，会使多个块级元素在一行内排列。
对内联元素使用浮动，可使该元素和块级元素一样可设置height、width。
右浮动会使元素倒序排列。

实现文字环绕图片效果：

2、浮动的副作用

给某元素设置了float属性，会使该元素脱离文档流。


例如，如果父元素没有设置高度，正常情况下子元素会把父元素撑开，而如果子元素设置了float属性，则父元素无法被撑开，造成父元素塌陷。


可以对父元素设置高度来解决该问题，但如果子元素太多就不行了。

1）使用clear属性清除浮动的副作用：

• none
• left 不允许左边有浮动对象
• right 不允许右边有浮动对象
• both 不允许有浮动对象
  例如：

div1{
width:100px;
height:100px;
background:red;
float:left;
}
div2{
width:120px;
height:120px;
background:blue;
clear:left;
}

2）给父元素添加overflow属性并结合zoom：1清除浮动：

.parent{
width:500px;
height:auto;
border:1px solid #000;
overflow:hidden;
zoom:1;
}
.child{
width:100px;
height:30px;
background:red;
border:1px solid #fff;
float:left;
}