2018-08-19 浮动问题详解

一、文档流

html标签会根据自身特点（例如div为block标签，有宽高，不管其宽度为多少，在文档流中都是占据一行，span标签为inline标签，只有宽度，没有高度，其在文档流中占据标签大小的空间），有秩序的排列在页面上，其排列的标准是以流式布局的形式，所以称之为文档流。

二、浮动

页面的特殊布局中需要个别元素摆脱其自身文档流特点，以需求排列元素位置，脱离文档流的元素排列方式便叫做浮动。例如li标签元素，是列表标签，和div一样属于block标签，但是如果要让li排成一行，就需要让li脱离文档流，添加一个向左的浮动。

三、浮动应用场景

1、表单布局，需要多个文本输入框排列在一行上；

2、规定元素宽度，响应式布局，页面缩小时，元素整个适配到下一行；

四、浮动问题

页面布局为：父级div作为容器，其中放置一个ul列表标签，给li宽高和背景颜色，并添加左浮动和左外边距。

当元素脱离文档流之后，父级容器就无法包裹住元素标签，使得之后的元素排列会出现以下问题：

1、给父级一个边跨，发现父级边框无法包裹子级元素；

2、父级div中添加一个div，设置背景颜色并加入文字内容，发现文字高度撑开父级div，背景颜色在浮动li块的下方，但文字却紧跟在li的左侧，没有被浮动的li覆盖。

3、给子级div宽度和高度，发现文字移到浮动元素的下方，子级div的高度撑开父级div。

4、继续给子级div添加一个overflow:hidden;样式，隐藏掉超出容器的文字，发现子级div跟随浮动流，紧贴排列在li的后方。

5、给父级容器添加一个overflow:hidden;样式，发现父级容器可以重新包裹住浮动元素，但是对超出宽度的元素直接隐藏，破坏了布局。

只设置宽度，不设置高度，overflow为hidden时没太大问题，超出宽度部分的浮动元素，自动流向下一行，但是如果设置了高度之后，便出现问题了。

6、给父级容器设置浮动样式，父级容器重新包裹住了子级div，并且不会出现裁切内容的现象，但是同样，父级容器便脱离了文档流，成为了浮动流，会对更高层的对布局产生一定的影响。

可以看到，仅仅设置了float:left;之后，父级容器紧紧的包裹住了子级元素，宽高都被子级元素撑开，脱离的整体的文档流。

这是设置了宽度和高度之后，超出宽度的子级浮动元素自动排列在下一行，且超出部分不会被裁切掉。

7、给父级设置绝对定位，与上述类似，只不过因为定义的是绝对定位，可以随意设置其文档位置。

五、浮动问题分析

以上可以看出，浮动对页面布局产生的一系列影响。

解决浮动对布局的影响，首先弄清楚为什么浮动会出现这些问题。

首先第一个问题很好理解，子级元素浮动之后，脱离文档流，不在属于容器内的元素，所以容器包裹不住标签块，而标签块按照浮动的顺序，依次排列，这种从下面的排列方式也可以看出来浮动流的特点。

规定了父级容器的宽度之后，超出父级容器的浮动块，会自动排列在第二行，且以第一行元素最大高度为自身的top值。

关于第二个和第三个问题，文字内容输入浮动流，在接触到浮动元素时，就和上述浮动元素一样，依次排列在前一个浮动元素的后面，容器设置宽度后，超出容器宽度的浮动元素自动另起一行。

从这里便可以看出，页面元素根据其位置流可以分两种，一种是文档流，一种是浮动流，文档流元素的位置根据元素本身特点排列，浮动流元素则按照浮动流特点进行排列元素。

4，5，6，7都是一个道理，就是把文档流转换为浮动流，从而使得子级元素和父级容器都以浮动流的形式排列。

总结一下就是，overflow，position，float都是让元素脱离文档流的属性，变成浮动元素，从而按照浮动流的方式进行布局。

六、浮动问题解决

根据对浮动问题的分析，有两种总的方式，一种是破坏文档结构解决浮动问题，这种比较简单，但因为破坏了文档结构，会在布局上留下一些隐患，一种只是通过添加样式来解决浮动问题，相比较而言会复杂一些，但不破坏文档结构。

（1）破坏文档结构解决浮动问题

1）添加一个子元素，给子元素设置clear清除浮动；

添加额外带有clear属性的元素

clear属性用来清除周围元素浮动，添加的一个带有clear属性的子元素来清除浮动带来的问题，使得父级容器可以重新包裹住子级元素。

2）给父级容器添加overflow，position，float样式

三种样式都是使得父级元素也脱离文档流，但是却改变了父级容器在整体布局中的位置，或者改变其子元素的布局方式，为了尽量减少因清浮动带来的问题，三种方式的优先级是position>float>overflow，

绝对定位position和float只会造成布局困扰，但overflow会改变内容的显示，所以不到万不得已还是不要使用overflow:hidden来清浮动。

（2）使用伪类样式清除浮动问题

有两种伪类了解一下：

:before在元素的开头添加文档信息，一般用于给列表或者表格标签内容的开头，加统一的信息。

:after在元素的末尾添加文档信息

关于这两个伪类有很多使用方式，这里只是使用其清浮动而已。

页面布局为：

给父级容器添加伪类

css样式 页面显示

content中是需要添加的内容，这里不需要添加任何内容，所以字符串为空，display把文字的inline结构改为block结构，然后使用clear清除浮动。

其实添加伪类的方式和在容器末尾添加额外的带有clear标签元素的方式类似，只不过不用改变原来的文档结构，推荐使用这种方式来清除浮动。