css--Clear Float

Floating clear environment: when we have a large box, there are a few small boxes nested inside, because the contents of the small box are changed. It is possible that its length will continue to grow until it exceeds the length of the large box. Large box at this point, defining a specific length is somewhat meaningless, since the final length is based on the length of the Inner small box. The Inner small box is set to float because of the layout. So this leads to a phenomenon where the box underneath the big box will come up on top, such as:

Ways to eliminate floats:

1, Clear:left | Right | Both (do not set the height of the parent element when using this.) ）

2. Use Overflow:hidden for the parent element (do not set the parent element's height when this is used). ）

3, pseudo-element clear floating (this use when the parent element is not set high.) ）

<!     DOCTYPE html>. Header,. Main,. footer {width:500px;            }. Header,. footer {height:100px; Background: #000;            }. Main {background: #eee; margin:10px0; /*Overflow:hidden;*/}. Content {width:300px;            height:300px;            Background:orange; float: Left;            }. sidebar {width:190px;            height:300px;            Background:green; float: Right; }. Clearfix:after {content:".";            Display:block; Height:0; Line-height:0;            Visibility:hidden;        Clear:both; }        /*compatible with IE browser*/. clearfix {zoom:1; }    </style>
Effect:
css--Clear Float