The element flow of a document is that all elements gravitate to the upper left of a document/page.
Block elements stretch to fill the width of a container, causing sibling elements to rest on top or below them.
Float refers to the alignment and wrapping of sibling elements or content around a block element. Float is analogous in a way to a word document. You can have one element occupy the left hand space of a container, and another occupy the right hand of a container.
Text-align too is similar to this, however it only affects elements residing in the content section of a container. If you are using mozilla firefox, their dev tools (though even chrome might have this) provide a diagram of an elements’ box model. Here is a sketch I made of it.
The flow of elements in a document gravitates to the left and top of all documents.
Block elements are elements that behave kind of like a tetris line block, they stretch across all available space taking up one ‘row’ of this document flow.
Inline elements do not automatically fill up all available horizontal space.
margin: 0px auto; will set 0px to the top and bottom of an element, but auto will cause left and right margins to be all available space of that container after calculating an elements width. So if you have a block element with a defined width less than it’s container, margin auto will respond to that.
Text-align has to do with aligning nodes in an elements content area. Gonna share a sketch I made of this
Top/left/bottom/right has less to do with flow or alignment and more to do with positioning. Position is defined by one of three states, relative, absolute, and fixed. If there are any others I missed it’s because I don’t use or understand them atm. Fixed places an element in a position relative to your browser, regardless of the document flow or scroll. Fixed elements persist in their position as you scroll a page. Relatively positioned elements are relative to their container. Absolute positioned eleents too are relative to the nearest parent container with a defined position, otherwise they are relative to the document root.
Using the top/left/bottom/right properties adjusts that elements position relative to whatever parent container they inherit.
Finally flexbox is a relatively new alignment system that replaces the old word document-like flow. The best way to understand it is to read MDN’s documentation on it and look at their diagram.