清除css样式的浮动！
1）如何清除同级之间的浮动
Clear:both
Float:left/right
1
2
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>
|
|
收藏
淘帖
踩
