常见的浮动出现在一个无序列表中，当每个li元素左浮动之后，会出现父元素高度坍塌
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
border:1px solid red;
list-style-type: none;
}
li{
border: 1px solid red;
width: 80px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<ul class="box">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul><body>
1、添加额外的标签,方便，但容易破坏标签结构
<ul class="box">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<!-- 下面三行都可以 -->
<br clear="both">
<!-- <br clear="all"> -->
<!-- <div style="clear: body"></div> -->
</ul>
2、父元素设置BFC，父元素设置overflow属性为auto或者hidden
.box{
border:1px solid red;
list-style-type: none;
/*下面两行都可以*/
overflow: auto;
/*overflow: hidden;*/
}3、父元素添加after伪元素
.box{
border:1px solid red;
list-style-type: none;
/*兼容IE6*/
zoom:1;
}
.box:after{
content: "";
clear: both;
display: block;
height: 0;
}4、浮动父元素：会造成新的问题
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
