如何清除css样式的浮动

清除css样式的浮动！

1）如何清除同级之间的浮动

Clear:both
Float:left/right

2）如何清除子级和父级之间的浮动

1.给父级添加高度

#ul1{
            border:1px solid #000;
            height:calc(100px * 4); 计算属性的
        }
        #ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>     

2.给父级加浮动

 #ul1{
            border:1px solid #000;
            float:left;
        }
#ul1 li{
         width:100px;
         height:100px;
         border:1px solid #999999;
         float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>   

3.给父级添加 overflow:hideen

#ul1{
      border:1px solid #000;
      overflow:hidden;
        }
#ul1 li{
       width:100px;
       height:100px;
       border:1px solid #999999;
       float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>     

4.子级后加< br clear=“both”/>

#ul1{
            border:1px solid #000;
        }
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
 <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <br clear="both">
</ul>

5.在子级后添加一个div

#ul1{
            border:1px solid #000;
        }
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
        }
.clear{
            width:100px;
            clear: both;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <div class='clear'></div>
</ul>

6.加伪类

#ul1{
            border:1px solid #000;
}
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
.clearfix:after{
            content:'';
            display:block;
            clear:both;
}
.clearfix{
            zoom:1;
}
<ul id="ul1" class='clearfix'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

到这里就没有啦！