Go With The Flow
When you create a document using CSS that has more than one container box, there is a default flow to how everything is positioned, assuming that box isn’t an absolute or fixed box, nor a float—and don’t worry, we’ll touch on those terms later.
Container boxes flow vertically from the top of the page, or parent container box, stacked on top of each other. Remember that this only applies to block boxes and not inline ones, because those flow horizontally from left to right. Think of it this way. When you’re typing text and you have a word that’s emphasized, an inline box flows just like text does. You could say it flows in a line. That was a CSS joke by the way, and it might be the first of its kind.
There’s one thing that I should mention about how CSS collapses vertical margins in the normal flow. That means instead of adding the bottom margin of a box to the top of the margin of the one below it, it takes the larger of the two values as the margin between them. A horizontal margin, however, is never collapsed. Here’s an example of what that looks like:
Inline boxes are a different story since they wrap or move down to a new line when content exceeds the width of the box.
