1.clear（css属性）
在添加了浮动的最近一个兄弟元素加上 clear:both;就可清除浮动
验证代码：
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
p{
clear: both;
height: 50px;
background-color: aquamarine
}
</style>
<body>
<div id="" class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<p>明天的我，要做的不是一个优秀的别人，而是一个更好的自己</p>
<h6>以自己喜欢的方式过一生</h6>
<h4>如果结果不如你所愿，就在尘埃落定前奋力一搏</h4>
</div>
</body>
2.BFC 块格式化上下文
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
2.1 在添加浮动的父级元素加上overflow（属性除visibility）
ul{
overflow: auto|hidden;
}
2.2 在添加浮动的父级元素加上display:flow-root
ul{
/* overflow: hidden; */
display: flow-root;
}
2.3 在添加浮动的父级元素加上display:inline-block
ul{
display:inline-block;
}
2.4 在添加浮动的父级元素加上 display:table-cell
2.5 在添加浮动的父级元素加上 contain属性
ul{
contain: layout;
/* contain: content; */
contain: paint;
}