Float浮动

 Float浮动

   浮动到底是什么？我们在实现多栏布局和导航菜单的时候大多数情况下都会用到float属性来实现，浮动（float）的三个属性值:left(左浮动)、right（右浮动）、none。

   那么我们知道浮动的用途和属性后，它到底使用呢？浮动到底是怎样的一个东西。

下面我就来给大家一一讲解、

一、浮动的意思就是把元素从常规的文档流中拿出来，文档流中拿出来大体可以指从元素指定位置发生了位置的移动，浮动的元素在脱离了常规的文档流之后，原来紧跟其后面的元素就会在浏览器空间允许的情况下，向上提升到浮动元素平起平坐，还可以和没有设置浮动的元素重叠在同一区域范围内。 如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。clear属性是清除浮动的方法，它有三个属性值：left（清除左浮动），right（清除右浮动），both（清除所有浮动）。

上图就是最简单的右浮动，浮动作为style样式的属性float，直接在css里面写入float方法就行了。

如果作为子元素来设置浮动它会在指定的父元素区域来进行浮动并且浮动的区域会把父元素的区域覆盖掉。所以在设置元素的浮动的时候，要注意一下父元素和子元素是否浮动同时重叠在一起，很有可能同时设置浮动后，某个区域被重叠了找不到原来的，或者后来设置的元素。

  如果同时给同一父元素的子元素设置浮动，它们不会因为div为块级元素而换行，它们只会跟着前面第一个浮动的元素并排显示，直到因为父元素空间不足，才会换行，换行后浮动向哪就从哪里开始。

如果说要用到取消浮动，例如下图

 如果用clear方法取消浮动后，div元素就会变成原来的样子，但是取消浮动是取消了浮动的属性，但是它们在左边或者在右边的的位置是没有变化的。