Clear floated elements

Problems:

Floated elements would keep align one after another. There are two situations that we may need to clear floated element.

1. We need to clear the previous floated elements and start from a new line.

2. We need to keep the floated elements in a container.

 

Solution:

        .clear {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

        .selfClear:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;

        }

 

 

Try it with jsfiddle