1
HTML/CSSIntermediate#css#accessibility
HTML/CSSAdvanced#css#layout
What is the difference between a block formatting context (BFC) and normal flow?
A BFC is an isolated rendering region where floats and margins are contained internally and don't interact with elements outside it. It's created by properties like overflow: hidden/auto, display: flow-root/inline-block, or float, and is commonly used to prevent margin collapsing or contain floated children.
Example
.container {
overflow: hidden; /* creates a new BFC, contains floated children */
}
.container img { float: left; }