浅谈CSS浮动属性

要介绍css的float浮动属性，就必须先了解一下标准文档流

标准文档流：

  在没有css的干预下，块级元素独占一行，可以设置宽高，行内元素并排显示，宽高自动填充。

  HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

float浮动属性最开始的用法是实现让目标内容被文字包裹这种在报纸上经常见到的情况，而后来大多被用来实现内容的横向并排排列，

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

float的属性介绍：

left ：元素向左浮动。

right ：元素向右浮动。

浮动的特性：

【1】子级浮动导致父级高度塌陷，解决办法：1.给父级再次添加一个高度2.使用overflow：hidden

【2】浮动的包裹性：

块级元素：包裹到内容区域，不再占满一整行，但是还有长度，长度和内容的长度一致，并且本体依旧是块级元素；

行内元素：设置浮动后会改变display属性，使其变成块级元素，并且可以设置宽高。

【3】元素浮动不会穿过padding区域

【4】浮动会使元素脱离文档流影响别的元素。