Good programmers web front-end route to share learning CSS float - document flow articles, arrange, document flow plain text as our text content, like all of the text will be next, down one arrangement, if the boundary will change line arrangement. Of course, if hit Enter or press the spacebar generally considered to be a word spacing, because English is a distance between each word, each unlike the Chinese characters linked. So whether you knock on a few enter, whether you knock a few spaces. Programs that only one word spacing distance of space. We call this phenomenon the blank is folded. Red arrows in the figure below is what we knocked and knocked Enter a space effect.
Arrange text and pictures
Because of typesetting, the width of the image as a whole. Unlike text can be separated from the middle, so when the graphic together we will find, as the picture contents of the document and also a stream of text elements, like, immediately preceding a word, followed by the text after the picture. But if a line is not the position of the rest of the width of the image, it will automatically change one line.
Because a picture and text elements, as a result, the picture height greater than the height of the text, this line will stay high, the higher the picture, the higher the line. In the same line of text will be in the lower end of the default image. If you want the text to a relative position in the middle of the picture, then you need to set up a picture CSS style Vertical Number of align = left-: Middle ; attention must be set to the picture is not set to the text.
Of course, if we set the two sheets of FIG observe two middle of the figure below the slot, because the <img src = "img / 1.jpg "> between a line feed. According to a feature of the above text, there will inevitably generate a space
How to solve this problem, there are many means of starting, the easiest is to connect two labels write, do not wrap
Block elements and inline elements
刚才我们所说的都是行内元素，也就是内容添加后会自动放在一行，如果页面的剩余的宽度比要放入的元素小，那么就会自动换行。
除了文本和图片还有一些其他的HTML标签也是行内元素。例如:
行内元素
<span>...</span>行内元素
|
上面所有的行内元素，如果直接写在代码中都会存在同一行中。当然换行br会将后面的元素都放在另外一行了。
有时候我们希望一个内容可以自己独立成行。这样我们就有了块元素。块元素会独立成行，与行内元素做明显的区分。
例如：
<address></address>地址文字 |
块元素和行内元素具体有哪些区别呢。
行内元素 |
块元素 |
|
同行 |
输入行内元素，就会自动同行 |
输入块级元素，自动换行，并且独立占有一行，其它行内元素不会和它同行的。 |
设置宽高 |
行内元素部分内容是不可以设置宽高的，例如span容器,a超链接标签等等，当然有些还是可以通过CSS样式更改宽高的，例如input，img,textarea等非文字的标签 |
块元素直接可以设置宽高，如果没有设置就会根据该元素的父级容器的宽自动设置100%，高度是根据内容撑开的，如果没有内容，块元素默认高度是0，这点很重要。 |
行内元素和块元素的互相转换
行内元素和块元素可以互相转换的，例如：
(1) 行内元素转换为块元素
这是默认的行内元素
这是转换后的。我们发现文字块换行了，而且独立占有一行，在这里我们设置display:block
(2) 块元素转换为行内元素
这是默认的div的块元素样式
设置为行内元素后。我们发现宽高失效了。一旦块级元素设置为行内元素，原来设置的宽高就会失效
(3) 块元素和行内元素转换为行内块元素
有时候我们想让容器（不是textArea或者input）既有宽高又可以排列在同一行中，我们可以转换为行内块容器。尤其是我们希望将多个不同宽高的容器放在同一行中，并且可以通过margin调节他们的位置（注意：行内元素不能通过margin调节垂直位置，因为他们都是同一行的），这时候行内块元素就非常有必要了。
块元素变成行内块元素
行内元素变行内块元素
我们发现这两个效果都是一样的。
大家可能觉得这样很棒了，我们可以利用图文混合排列做成网页了，但是注意我们转换成了行内块元素，他们就是在行内了，任何一个更改了marginTop都会撑开了行高。就会变成这样：
到此为止我们就认识了标准的文档流，如果想在这种标准文档流中排版出复杂的图文混排，那基本上很难。因此我们就要学习浮动。浮动就是让容器脱离了这个标准文档流，就像浮动在页面上一样。关于这个问题，我们在下一篇中详细介绍。