float属性

left
元素向左浮动
right
元素向右浮动
none
默认值。元素不浮动，并会显示在其文本中出现的位置

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

浮动的特性

1.浮动元素支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，宽度足够的话，会排在一行
4.脱离文档流
5.提升层级半级
也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素

浮动—父子关系

1）浮动元素不会在其浮动方向上溢出父级的包含块
也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距
2）浮动元素的位置受到同级同向浮动元素的影响
也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面

浮动影响父层盒子高度

父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷

• 溢出处理
  overflow属性

visible
默认值。内容不会被修剪，会呈现在盒子之外
hidden
内容会被修剪，并且其余内容是不可见的
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

• 清除浮动
  clear属性
  left
  在左侧不允许浮动元素
  right
  在右侧不允许浮动元素
  both
  在左、右两侧不允许浮动元素
  none
  默认值。允许浮动元素出现在两侧

清除两测浮动
清除两侧浮动，有扩展父级盒子高度的作用