CSS Float Property and Collapsing Margins

Collapsing margins normally happens in case of block level boxes. Let's say the browser reads your HTML markup and needs to render three divs in the source code that have been written one after the other, that is to say, three divs on top of one another. If each of those divs has margin: 10px; on all sides, then the browser renders the boxes in such a way that the boxes that are placed on top of each other share or collapse their margin. 

In the example below, #box1 has a margin-bottom: 10px; and #box2 has a margin-top: 10px;. Since those two boxes are supposed to be be place on top of one another, normally, 10px + 10px (margin-bottom of #box1 + margin-top of #box2) would be 20px. But the browser leaves only 10px space between those two boxes. In CSS jargon, we say, the two margins collapse

Take a look at the code and the screen shot in Firefox. Click the image to enlarge -requires JavaScript- and then compare the distance between #box1 and #box2 and the distance between the left edge of #box1 with the left edge of the viewport. They are equal.

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
* {
	margin: 0; 
	padding: 0; 
}
body {
	background-color: #8c8c8c; 
	font-size: 100%; 
	font-family: Verdana, Arial, sans-serif; 
}
div {
	 
	background-color: white; 
	color: black;
	border: 1px solid red;
	padding: 20px; 
	margin: 10px;
	width: 30%; 
	height: 100px; 
}

</style>
</head>

<body>
<div id="box1">Box1</div>
<div id="box2">Box2</div>
<div id="box3">Box3</div>
</body>

</html>
three normal divs
Three normal divs. The margins between the boxes collapse. (Click image to enlarge - requires JavaScript)

Now, let's float the same three boxes to the left and give them width: 100%; so they are place on top of each other.

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
* {
	margin: 0; 
	padding: 0; 
}
body {
	background-color: #8c8c8c; 
	font-size: 100%; 
	font-family: Verdana, Arial, sans-serif; 
}
div {
	float: left; 
	background-color: white; 
	color: black;
	border: 1px solid red;
	padding: 20px; 
	margin: 10px;
	width: 100%; 
	height: 100px; 
}

</style>
</head>

<body>
<div id="box1">Box1</div>
<div id="box2">Box2</div>
<div id="box3">Box3</div>
</body>

</html>
three divs floated to left having width 100%
The divs have been floated to left and width: 100% has been given to them all.

If you compare the same two distances mentioned above this time, you'll see that the distance between the boxes is exactly two times the margin left of #box1 for instance. That is to say that collapsing margins did not happen this time after we floated the boxes to left. 

To check the distances yourself, you can rebuild this example on your own machine and inspect the distances in your browser's developer tools or use some tool like Firebug.

This whole example shows that collapsing margins does not happen in case of floated elements.