元素浮动元素浮动float:leftorright;

元素浮动 float: left or right;

html
<style>
#contain{
    width: 200px;
    height: 200px;
    background: red;
    color: white;
}

li{
    float: left;
}
</style>

<body>
    <div id="contain">
        <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        </ul>
    </div>

元素浮动后的缺陷：父元素会塌陷
解决方法(四种)：
1.给父元素设置高度 
2.父元素设置溢出隐藏： overflow：hidden 
3.给父元素内添加最后一个子元素，并在子元素内设置清除浮动 clear:both;
4.clearfix
.clearfix after:{
content:"";
display:block;
clear:both;
}