浮动

浮动float

• float 设置元素向哪个方向浮动
  属性值： none 默认值，不浮动
  left 左浮动，设置元素向左方向浮动显示
  right 右浮动，设置元素向有方向浮动显示
  要求：要浮动，一窝都浮动
  当一个元素中只要有一个子元素使用了浮动，那这个元素中的所有子元素就都需要使用浮动
  浮动会使元素脱离正常文档流-----父元素高度塌陷(父元素没有书写固定高度的情况下)
  当给一个元素使用了float且属性值不为none时，这个元素在父元素内就不再占据空间，不会再参与到撑开父元素高度的作用
  如果一个元素中的所有子元素都使用了float属性且属性值不为none,那这个元素在没有设置固定高度的情况下就会没有高度，height：0
  清除浮动—清除浮动造成的父元素高度塌陷的后果
  1、给浮动元素的父元素添加固定高度，添加的高度为子元素中高度最高的子元素的高度 不灵活
  2、给浮动元素的父元素添加属性 overflow: hidden; 相对灵活
  3、后续补充
  ** 注意：**
  1、当父元素一行之上剩余的空间不够容纳下所有浮动元素显示，浮动元素就会换行到下一行显示，这个过程会一直持续到某一行能容纳下所有浮动显示位置
  2、浮动会使元素产生块级框(拥有块级元素可以设置宽高的特点)，不论其本身是何种类型的元素
  3、块级元素在没有设置固定宽高和没有内容时，浮动后这个元素的宽高为0,如果有内容宽高由内容撑开
  4、当浮动元素在一行放下换行时，下一行浮动给元素的顶点是根据上一行浮动元素的最后一个浮动元素的高度决定的
  下一行的顶点为上一行最后一个浮动元素的底端