1. (推荐)
通过添加伪类元素after
ul{
border: 1px solid saddlebrown;
}
ul:after{
content: '';
display: block;
clear: both;
}
li{
float: left;
margin-right: 10px;
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
2. 通过触发BFC可以变相的清除掉浮动。给父级添加overflow: hidden
ul{
border: 1px solid saddlebrown;
overflow: hidden; // 触发BFC
}
li{
float: left;
margin-right: 10px;
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
3. (不推荐)通过额外标签法:在浮动元素平级的最后面添加额外元素。但缺点是会造成产生额外 无用的标签。
ul{
border: 1px solid saddlebrown;
}
li{
float: left;
margin-right: 10px;
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
}
.box{
clear: both;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<div class="box"></div>
</ul>