Example
Using the overflow property with a value different to visible will create a new block formatting context. This is useful for aligning a block element next to a floated element.
CSS
img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}
HTML
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fplacehold.it%2F100x100%26quot%3B%26gt%3B%26lt%3Bdiv%26gt%3B%2520%2520%26lt%3Bp%26gt%3BLorem%2520ipsum%2520dolor%2520sit%2520amet%2C%2520cum%2520no%2520paulo%2520mollis%2520pertinacia.%26lt%3B%2Fp%26gt%3B%2520%2520%26lt%3Bp%26gt%3BAd%2520case%2520omnis%2520nam%2C%2520mutat%2520deseruisse%2520persequeris%2520eos%2520ad%2C%2520in%2520tollit%2520debitis%2520sea.%26lt%3B%2Fp%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">Result
This example shows how paragraphs within a div with the overflow property set will interact with a floated image.
