CSS to clear floating methods

1. Using the additional labeling method

<! DOCTYPE html>. outer{border:1px solid black;        width:210px;            }. inner{width:50px;            height:50px; Background-color: #005FC3; Margin:010px; float: Left; }. footer{Background-color: #ff4400;            width:212px;        height:100px;        }. clearfix{Clear:both; }    </style>
This is a common method of early use, but for people with code cleanliness, the solution is not perfect.
2. Using: After as Element
<! DOCTYPE html>. outer{border:1px solid black;        width:210px;            }. inner{width:50px;            height:50px; Background-color: #005FC3; Margin:010px; float: Left; }. footer{Background-color: #ff4400;            width:212px;        height:100px; }. clearfix:after{/*The simplest way*/content:‘‘;            Display:block;        Clear:both; }        /*sina use way. clearfix:after{content: ';            Display:block;            Clear:both;            height:0;        Visibility:hidden; }        */. clearfix{/*compatible with IE*/Zoom:1; }    </style>
3. Set the parent element to high
<! DOCTYPE html>. Outer {border:1px solid black;                width:210px;            height:50px;                }. inner {width:50px;                height:50px; Background-color: #ff4400; Margin:010px; float: Left; }. footer {background-color: #005FC3;                width:212px;            height:100px; }        </style> 
4. Using the Overflow:hidden attribute
<! DOCTYPE html>. outer{border:1px solid black;            width:210px;            Overflow:hidden; Zoom:1;/*compatible with IE*/}. inner{width:50px;            height:50px; Background-color: #005FC3; Margin:010px; float: Left; }. footer{Background-color: #ff4400;            width:212px;        height:100px; }    </style>
CSS to clear floating methods