清除浮动的方法

1. 使用带 clear 属性的空元素

 在浮动元素后使用一个空元素如<div class="clear"></div>，
 并在 CSS 中赋予
 .clear{
    clear: both;
      }
    属性即可清理浮动。 

2. 创建BFC
   给浮动元素的容器添加 overflow:hidden;或 overflow:auto。
3. 使用 CSS 的:after 伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，相当于给这个元素添加最后一个子元素）和
IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实
现元素末尾添加一个看不见的块元素（Block element）清理浮动。

    <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

        .item {
            width: 200px;
            height: 200px;
            background: red;
            margin: 6px;
            float: left;
        }
			
		//微元素清除浮动三件套	
        .clearfix::after {
        	//b必须写
            content: "";
            //要变成块盒
            display: block;
            clear: both;
        }
    </style>
</head>


  <div class="container clearfix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      //相当于在这里加了一个after元素
      //:after
    </div>

4. 浮动的元素的容器添加浮动
   给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影
   响布局，不推荐使用。
   5.给父容器设置决定定位和固定定位