Problems caused by floating elements and solutions?

Floating elements cause problems:

( 1 height) of the parent element can not be softened, and the influence of the parent element sibling elements

( 2 ) the same level of non-floating elements and the floating elements (inline elements) will follow thereafter

( 3 ) if not the first floating element, the element before the element also needs to float, otherwise it will affect the structure of the page display

Solution: Use CSS in Clear: both ; attribute resolves to clear the floating element 2 , 3 issues, for the problem 1 , add the following styles, elements are added to the parent clearfix style:

 

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    display: inline-block;
} /* for IE/Mac */