优秀程序员web前端学习路线分享CSS浮动文档流，纯文本的排列，文档流就像我们的文字内容，所有的文字他们都会挨着挨着，一一排列。如果他们到达边界，他们将被安排在另一排。当然，如果你敲回车或者按空格键，一般都会认为是单词间隙，因为英语中每个单词之间是有距离的，不像汉字是连在一起的。所以不管你打了多少个回车，不管你打了多少个空格。该程序只考虑单词之间的一个空格距离。我们称这种现象为空白折叠现象。下图红色箭头是回车加空格的效果。图片说明　　　　文字与图片的排列　　因为是图文排版，所以图片的宽度是一个整体。不像文字可以在中间分开，我们会发现当图文放在一起时，图片作为文档流中的内容，和一个文字元素一样，在上一个文字的旁边，在后面的文字按照图片。但是如果一行的剩余位置不够图片的宽度，就会自动换成一行。　　因为图片和文字元素是一样的，所以如果图片的高度大于文字的高度，那么线条就会抬高。图片越高，线越高。同一行的文字默认会出现在图片的底部。如果想让文字相对在图片中间，需要给图片设置一个CSS样式vertical-align:middle；注意一定要为图片设置，不能为文字设置。图片说明　　　　当然，如果我们设置两张图片，注意下面两张图片之间的空隙，原因是之间有换行符。根据以上文字的特点，这里难免会产生一张空白的图片描述　　　　。如何解决这个问题，一开始有很多方法。最简单的就是把两个标签连起来写不包裹图片描述　　　　块元素和内联元素　　刚才说的都是内联元素，就是添加内容后会自动放在上面一条线。如果页面的剩余宽度小于要放置的元素，那么该行将自动换行。　　除了文本和图像之外，还有一些其他HTML标签也是内联元素。例如：　　内联元素...内联元素...链接换行...加粗...加粗图片...上标...下标...斜体...斜体...删除线...下划线TextBox...多行文本...如果直接写在下拉列表上方的所有行内元素，将存在于同一行代码中间。当然，newlinebr会将后面的元素放在另一行。有时候我们希望一段内容可以独立运行。这样我们就有了块元素。块元素将单独排成一排，与行内元素明显区分开来。例如：

...

...

...

...

...

...

...

...

...

...前后缩进5个字符
...
无序列表
...
有序列表

...

定义列表...form
...
form
...
块容器　　块元素和行内元素具体有什么区别？内联元素与块级元素并列输入内联元素，自动并排输入块级元素，自动换行，独立占一行，其他内联元素不一起。内联元素的部分内容是不能设置宽高的，比如span容器，超链接标签等，当然有些还是可以通过CSS样式来改变宽高的，比如input、img、textarea等非文本标签块元素可以直接设置宽高。如果没有设置，会自动根据元素父容器的宽度设置为100%。高度根据内容展开。如果没有内容，块元素默认高度为0，这一点很重要。内联元素和块元素相互转换内联元素和块元素可以相互转换，例如：内联元素转换为块元素　　这是默认的内联元素图片说明　　这是转换后的。我们发现文本块已经换行，独立占一行。这里我们设置display:blockimagedescription块元素转换为行内元素。这是图片描述　　设置为行内元素后div默认的块元素样式。我们发现宽高不对。一旦块级元素被设置为行内元素，原有的宽高就失效了。图片说明　　block元素和inline元素转换为inlineblock元素有时候我们希望容器（不是textArea或input）的width和height都排列在同一行，我们可以转换为inline-block容器。具体来说，我们想在同一行中放置多个不同宽高的容器，并且可以通过margin调整它们的位置（注意：内联元素不能通过margin调整垂直位置，因为它们都在同一行），这时候内联Block元素就非常有必要了。块元素变成行内块元素图片说明行内元素变成行内块元素图片说明　　　　我们发现两者的效果是一样的。　　你可能觉得这很棒。我们可以使用图形和文字的混合排列来制作网页，但是注意我们已经把它转换成了行内块元素，而且是行内的。对marginTop的任何更改都会扩大行高。就会变成这样：图片说明　　至此我们已经知道了标准的文档流程，在这个标准的文档流程中基本很难排版复杂的图文。所以我们要学会漂浮。浮动就是让容器脱离这个标准的文档流，就像在页面上浮动一样。我们将在下一篇文章中详细讨论这个问题。[1]:/img/bVbxPBo[2]:/img/bVbxPBw[3]:/img/bVbxPBF[4]:/img/bVbxPBI[5]:/img/bVbxPBR[6]:/img/bVbxPBT[7]]:/img/bVbxPBV[8]:/img/bVbxPB4[9]:/img/bVbxPB9[10]:/img/bVbxPCc[11]:/img/bVbxPCg