5.float浮动

一、float属性

1.css中的float

1.float中的四个参数

• float:left 左浮动
• float:right 右浮动
• float:none 不浮动
• float:inherit 继承浮动

2.float实现文本环绕图片效果

float:left

1. 带有float元素的都会变成块状元素
2. 浮动的块虽然脱离了文档流，但依然占据文档流的空间。

3.CSS中的定位机制

1. 标准流（普通流）
2. 定位
3. 浮动

4.浮动副作用的解决

• 手动给父元素添加高度
• 通过clear清除内部和外部浮动
  • clear : none
  • clear : left 不允许左边有浮动对象
  • clear : right 不允许右边有浮动对象
  • clear : both 不允许有浮动对象
• 通过父元素添加overfloat属性并结合zoom:1使用

overflow:auto/hidden/*超出部分会被截取*/;
zoom:1/*IE浏览器专用属性，可以通过子元素的总体高度，来放大缩小父元素的高度*/

• 给父元素添加浮动
  • 会出现下面的元素塌陷的问题，解决办法：给下面元素添加clear:auto的属性