float:leftとright数回使用しました。
本に「流れに沿って」とか「流れを断ち切って」と書いてあるが、いまだに意味がわからない。
例えば：
流れに乗ってます
フロートのない要素に適用しても、ページの流れを崩すことはありません。したがって、負のマージンを使用して要素を上に微調整すると、後続のすべての要素も同様に微調整されます。
( http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/より)
これは何を意味するのでしょうか？
これを参照してください：
ブロック レベルの要素は、フロー内にボックスを作成します。それらは常に、ソリッドで規則的な長方形の形状です。これが、ブラウザーがおかしな形状を気にすることなく、境界線、幅、高さを指定できる理由です。インライン レベルの要素では、この美しい規則的な形にはなりません。最初は規則的な形ですが、左側のボックスの隣に流れて、強制的に右側に移動する可能性があります。これが図です：
ご覧のとおり、インライン レベル要素 (テキスト) がいたるところにあります。ブロックレベルの要素の間を行き来する必要があります。ブラウザーがこれをレンダリングできるようにするために、インライン テキストは「ライン ボックス」に分割されます。これは、実際には存在せず、他のブロック レベル要素の隣に配置できる、現在の行のテキストを含む一種のブロック レベル ボックスです。 . 上の図のライン ボックスは、水色でアウトライン化されています。したがって、ブロック レベルの要素はフロー内で適切なボックスを形成しますが、インラインの要素はそうではありません。また、ブロック レベルの要素は隣り合って表示できないことにも注意してください。横に表示できるように幅を制限しても、常に異なる行に表示されます (フロート モデルまたは配置モデルを呼び出さない限り、これについては後で触れます）