css浮动属性简介

css浮动属性

1：浮动：顾名思义就是让元素漂浮起来。且从我们的视角看去页面并没有发生任何变化。如图所示：

该图为一个网页，我们直面看上去，是看不出页面上是否有浮动的。但当我们从侧面看上去时，浮动就很明显了。

如图所示:很明显的就能看出网页部分1，网页部分2是不浮动的，他们两处在同一个平面上。而网页部分3明显浮动于网页上方，但是从我们的视角去看却并没有变化。

2：浮动属性的书写方式： float： ；它具有三种属性值书写方式分别为：
float：left； 左浮动
float：right； 右浮动
Float：none； 没有浮动

3:浮动属性的作用：在文档流中块状元素是自上而下的显示顺序，内联元素是自左而右的显示顺序。而在网页中需要让一些上下排列的元素变成左右的排列顺序，这就需要用到浮动属性。
作用：让上下排列的元素可以并排显示。左浮动会使浮起来的元素自左向右排列为一排，右浮动会使浮起来的元素自右向左依次排列为一排。如果有N个元素要在一排并列显示，那么N个元素都需要添加浮动属性。且添加浮动属性后，元素对margin：0 auto；不生效。

4：浮动显示规则：元素添加浮动之后，就漂浮起来了，原本在标准文档流利的位置就不再占有了，后面的内容会把位置补上去，漂浮起来的元素会遮挡部分补上的元素。但是文字是不会被遮挡的，这就形成了文字环绕的模式。如下图所示：

浮动对象会向左或者向右移动遇到边框（border），填充（padding），外边界（margin）或者另一块元素为止。
当上一块元素漂浮起来时，会使下一个元素顶上原来的位置，会致使下个元素被遮挡，这时就需要为下个元素添加清除浮动属性，以防止其受到影响。清除浮动属性书写方式：clear： ；其有四个属性值，分别为：none：不清除
left：清除左浮动
right：清除右浮动
both：清除两侧浮动

注：清除浮动属性，只针对于自身起作用，对其他元素是没有影响的。且清除浮动属性，不是给浮动的元素加的，而是给受了浮动影响的元素加的。