Shrink To Avoid Float Complexity

Test 1 (1 float)

This yellow square is floated left and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 50px left margin and a 50px right margin;

---

Test 2 (1 float)

This yellow square is floated left and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 116px left margin;

---

Test 3 (1 float)

This yellow square is a floated left and it has a right margin of 50px.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 50px right margin;

---

Test 4 (2 floats)

This yellow square is floated left and it has no margin.

This yellow square is a floated right and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 50px left margin and a 50px right margin;

---

Test 5 (2 floats)

This yellow square is floated left and it has no margin.

This yellow square is a floated right and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 100px right margin;

---

Test 6 (2 floats)

This yellow square is floated left and it has a right margin of 20px.

This yellow square is floated right and it has a left margin of 20px.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 0px right margin;