良いプログラマのWeb 学習共有するためのフロントエンドルートCSSのfloatを- 文書フロー記事、手配し、私たちのテキストコンテンツとしてドキュメントフローのプレーンテキスト、境界が変更される場合は、テキストの全ては、一つ下の配置、次なりますように線配置。ヒットが入力または英語の各単語間の距離があるので、一般的に単語の間隔であると考えられてスペースキーを押した場合はもちろん、漢字とは異なり、それぞれがリンク。あなたは、いくつかのスペースをノックするかどうか、いくつかの入力をノックするかどうかそう。プログラム空間の1ワードのみの間隔距離。私たちは、ブランクが折り畳まれている。この現象を呼び出します。下の図の赤い矢印は、私たちはノックとスペース効果を入力ノックするものです。
テキストと画像を配置
組版のため、全体としての画像の幅。テキストと違って途中から分離することができるので、すぐに画像の後にテキストが続く単語を、先行する、のような時に一緒にグラフィックは、私たちは、文書の画像内容と、テキスト要素のストリームとして、わかります。ラインは、画像の幅の残りの位置ではない場合でも、それが自動的に1行を変更します。
画像とテキスト要素なので、結果として、テキストの高さよりも大きい画像の高さは、このラインは、高い、絵高いラインを高いままになります。テキストの同じ行で、デフォルトの画像の下端になります。あなたは絵の真ん中に相対的な位置にテキストをしたい場合は、ピクチャー設定する必要が CSSスタイル整列の垂直方向の数=左：中東、注意がテキストに設定されていない画像に設定する必要があります。
我々が設定されている場合はもちろん、図の2枚、スロット下図の2つの中間を観察するために、<IMG SRC =「IMG / 1.JPG 」> 改行の間です。上記の文章の特徴によれば、必然的にスペースが生成されます。
この問題を解決する方法は、出発の多くの手段がありますが、最も簡単では、ラップしない書き込み2つのラベルを接続することです
ブロック要素とインライン要素
刚才我们所说的都是行内元素，也就是内容添加后会自动放在一行，如果页面的剩余的宽度比要放入的元素小，那么就会自动换行。
除了文本和图片还有一些其他的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都会撑开了行高。就会变成这样：
到此为止我们就认识了标准的文档流，如果想在这种标准文档流中排版出复杂的图文混排，那基本上很难。因此我们就要学习浮动。浮动就是让容器脱离了这个标准文档流，就像浮动在页面上一样。关于这个问题，我们在下一篇中详细介绍。