CSS浮动属性简单介绍

CSS浮动

在介绍浮动之前，先来介绍一下文档流和块状元素。
文档流：块状元素自上而下的显示顺序，称之为文档流。
块状元素：独占一行，即使有很大空间也不会让后面元素上来并排显示，可以直接定义自身宽高的元素。
浮动（float）属性是CSS布局中的常用属性，因为在一个文本中，每个元素都有自身默认的排列顺序，在CSS中我们可以通过浮动（float）属性来改变文本的默认排列顺序，从而对文档内容进行排列。
float是CSS样式表中的浮动属性，作用是设置标记元素的浮动布局，改变元素的排列方式，使元素可以在一排显示。

语法格式：

 float: left/right/none；
        left：元素靠左侧浮动
        right：元素靠右侧浮动
        none：元素不浮动（元素默认排列顺序）

各个浮动方式的区别：
当设置元素浮动属性float：none/left/right时，具体代码及元素排列方式如下图。

从图中可以看出，当float：none时，元素排列方式为自上而下排列。


从图中可以看出，当float：left时，元素排列方式为自左向右排列。

从图中可以看出，当float：right时，元素排列方式为自左向右排列，浮动的顺序与HTML中的顺序一致。

浮动的显示规则：

  1.元素添加浮动之后，原本在文档中的位置不再占有，后面的内容会补上去；
  2.如果有n个元素在一排显示，n个元素都得添加浮动；
  3.元素添加浮动后的排列顺序与在HTML中的排列顺序一致；
  4.元素添加浮动后对margin: 0 auto 不生效；
  5.元素添加浮动后会向左或向右浮动，直到遇到边框，填充值，外边界或另一个块状元素为止。

设置了浮动，可是元素不显示浮动效果？

当遇到这种情况时，首先排查代码的书写问题，然后查看是不是权重的问题，除此之外，放置浮动元素的“容器”大小也会影响浮动的显示效果，当“容器”不够大时，设置浮动的元素无法在一行显示，元素就会折行显示，遇到这种情况应该将设置浮动的元素设置小一点，或者把“容器”设置大一点。

清除浮动（clear）

 cleart: left/right/none/both;
         left：  清除左浮动
         right： 清除右浮动 
         none：  元素不浮动（元素默认排列顺序）
         both:   清除两侧浮动（比较常用）

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

浮动的应用：

浮动属性广泛应用于网站中导航的制作以及网站中主体内容区的分栏显示。