逆战班：关于浮动的理解

逆战班：关于浮动的理解
CSS浮动属性在前端学习（CSS）应用中是极其重要的，也是必须掌握的重要知识点。
关于浮动的概念不再赘述，我们且谈一下它的作用极其运用场合等。
1、首先看一下浮动的属性值：
float：left；
float：none；
float：right；
我们平时写网页时，为了页面能居中显示，一般在元素开头会加margin：0 auto；当然几乎所有的大模块元素都会加它，既为我们带来方便布局的同时，也为我们带来了困扰，由于继承属性，父元素加了margin：0 auto；之后，其子元素便会占有很多自身不该占有的空间，导致页面混乱；这时就需要浮动了。
上文写到的语句可以很好的让我们的页面达到我们想要的效果，针对块状元素起作用，给元素加浮动之后，让元素先飘起来，然后根据布局大小自行排列对齐，同时也可用padding、margin等设置相应的属性值来控制元素浮动的距离和位置。
要特别注意的是如果有N个元素要在一排并列显示，那么着N个元素都需要添加浮动属性，并且浮动后排版的顺序是跟HTML里的标签属性顺序有关的；添加了浮动之后的属性，对margin：0 auto;就不生效了。
2、我们可以举例说明
如下面这段关于首页导航的代码：（无序列表）和运行结果

我们给li或ul加上浮动之后的代码和运行结果

结果：

总之，浮动是页面布局的刚需，页面的每个模块之间，模块内部各种标签之间，都需要用到浮动来让元素听从安排。
另外需要说的是，当某模块内含有a标签等内联元素，而无法设置宽和高时，除了用display之外，给a加浮动后也可设置宽高。
3、浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。
4、清除浮动：
clear： none 不清除
clear： left 清除左浮动
clear：right 清除右浮动
clear：both 清除两侧浮动（比较常用）
要清楚的是，清除浮动属性并不是给浮动元素加的，而是给受到浮动元素影响的元素加的，
并且清除浮动属性，只针对于自身起作用，对其他元素是没有影响的。