浮动（float）

float

文档流

默认状态下元素在文档中所处的位置

浮动布局

适用场景 块元素的横向排布

浮动元素的特点

1. 浮动(float)的值有两个 ：左浮动（left）和右浮动（right）。
2. 设置了浮动的元素，其默认大小有内容撑出 （对于块元素而言）
   
   

div中没有设置宽度，宽度等于其父元素的宽度,给div和span都设置左浮动后div的宽度是内容撑开的宽度

3. 设置了浮动的元素，可以设置宽高。（对于行元素而言）
4. 设置了浮动元素，水平浮动，直到遇到父级元素的边界或者另外一个浮动元素停止浮动（哪个元素在前面哪个元先浮动）
5. 设置了浮动是元素，脱离文档流，层级提升，失去自己之前的位置，会影响到后面的元素，但不影响其前面的元素，但是如果后面的元素里有图片，或者文字，图片或者文字不受影响。
6. 设置了浮动的元素，margin的auto失效。

浮动产生的问题

• 浮动产生的第一个问题
  浮动的元素脱离文档流，层级提升，失去自己之前的位置，其后面的元素会受到影响，被浮动元素所覆盖，造成局部问题
  解决办法：
  给受影响的元素清除浮动的影响
  clear样式用于清除浮动产生的影响
  三个值： left：清除左浮动产生的影响
  right：清除右浮动产生的影响
  both：清除所有浮动产生的影响

• 浮动产生的第二个问题
  如果一个元素没有设置高度，其高度默认由内容元素撑出，但是浮动元素脱离文档流，不在负责撑起父元素的高度，所以如果一个父元素里所有的子元素都浮动，那么父级元素就没有高度了，我们称之为“父级塌陷”。
  解决办法：
  1.认为给父级设置一个高度
  2.给父级加overflow:hiddien
  3.在浮动元素的最后，添加一个非行元素，并给这个元素设置clear:both