Using overflow: auto to clear floats

Test1: Using "overflow: auto" to clear floats

Container DIV has no overflow:auto, henece its height is not calculated correctly

Fusce nec dignissim ante. Aenean luctus sapien ac nunc scelerisque sit amet lobortis lorem tristique. Etiam quis lectus urna. Proin sollicitudin tortor luctus mauris pellentesque luctus. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros.

Ut sagittis libero ut dui cursus id tempus leo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut adipiscing sapien. Pellentesque vitae sem massa. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros. Maecenas gravida, lectus eget varius posuere, lacus nunc sagittis neque, non porttitor justo nunc ac ligula.

Container DIV has overflow:auto, hence correct height

Test2: Using "overflow: hidden" to avoid wrapping

float: left;
width: 200px;
background: #ddd;

This has no overflow hidden. Aenean luctus sapien ac nunc scelerisque sit amet lobortis lorem tristique. Etiam quis lectus urna. Proin sollicitudin tortor luctus mauris pellentesque luctus. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros. Fusce nec dignissim ante. Aenean luctus sapien ac nunc scelerisque sit amet lobortis lorem tristique. Etiam quis lectus urna. Proin sollicitudin tortor luctus mauris pellentesque luctus. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros.

float: left;
width: 200px;
background: #ddd;

This has overflow: hidden. Aenean luctus sapien ac nunc scelerisque sit amet lobortis lorem tristique. Etiam quis lectus urna. Proin sollicitudin tortor luctus mauris pellentesque luctus. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros. Fusce nec dignissim ante. Aenean luctus sapien ac nunc scelerisque sit amet lobortis lorem tristique. Etiam quis lectus urna. Proin sollicitudin tortor luctus mauris pellentesque luctus. Duis ut urna ac diam convallis cursus. Maecenas id fringilla eros.

Test1: Using "overflow: auto" to clear floats

Container DIV has no overflow:auto, henece its height is not calculated correctly

Container DIV has overflow:auto, hence correct height

Test2: Using "overflow: hidden" to avoid wrapping

float: left; width: 200px; background: #ddd;

float: left; width: 200px; background: #ddd;

float: left;
width: 200px;
background: #ddd;

float: left;
width: 200px;
background: #ddd;