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;
}
窘迫的日子里，却总是有它好玩的地方