CSS中关于浮动的属性和内容介绍

浮动:会遮住下面的元素，但是不会遮住文字内容。

1.文档流：将窗体自上而下分成一行一行，并在每行中按照从左到右依次排放元素，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

2.标准文档流

定义:浏览器的排版是根据元素的特征（块和行级），从上往下，从左往右排版，这就是标准文档流。

标准文档流分类:块级元素和行内元素

脱离标准文档流：本该按照正常布局方式从左至右自上而下排布，并且符合标签本身的含义，却不再遵循这个顺序排布了，即跳出了文档流的管理和约束，这个标签在原文档流中所占的空间也被清除了。

文档流脱离的原因:1.浮动(float)

                              2.定位:绝对定位（absolute）和固定定位(fixed)

4.元素类型：

行内块元素：1.可设置宽高

                      2.并排显示

                      3.元素原始大小取决于元素内容

5.元素转换：display:block 元素会独占一行，多个元素设置为block会另起一行。属于块级元素。

                     display:inline 内联元素，多个元素会放置在同一行内。

                     display:inline-block 内联对象会被放置在同一行内。

6.属性:float:right 右浮动

           float:left左浮动

           float:none 默认值，不浮动，并会显示在其在文本中出现的位置。

7.清除浮动的方法:1.父元素添加overflow:hidden；

                             2.额外标签法: 在最后一个浮动标签后，新加一个标签，给其设置clear：both；

                            3.伪元素：after，额外标签法的进阶

                            4.双伪元素：after和before(推荐使用)