清除浮动方法汇总

1.子元素添加一行空div设置 style="clear:both"属性
.....
div1,.div2{
            width:200px;
            height:200px;
            background-color: green;
            float: left;
        }
        .div2{
            background-color: red;
        }
.....

<div>
      <div class="div1"></div>
      <div class="div2"></div>
     <div style="clear:both;"></div>
  </div>

2.父元素添加 {overflow:hidden}
  <div style="overflow:hidden;">
      <div class="div1"></div>
      <div class="div2"></div>

  </div>

3.父元素定义伪类：after

.....
    .div1,.div2{
            width:200px;
            height:200px;
            background-color: green;
            float: left;
        }
        .div2{
            background-color: red;
        }
        .parent{
            zoom:1;
        }
        .parent:after{
            display: block;
            clear: both;
            content:" ";
            visibility: hidden;
        }
        ......
<div class="parent">
      <div class="div1"></div>
      <div class="div2"></div>

  </div>
  <div> this is a test</div>

4.子元素结束处加</br style="cleat:both;">
....
<div >
      <div class="div1"></div>
      <div class="div2"></div>
      <br style="clear:both;">
  </div>
  .....

5 父元素设置 overflow:auto 属性

    .parent{
        overflow: auto;
    }

6.父元素社会disolay:table属性
原理：将div的属性边城表格

---

7.给父元素设置高度
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
    .parent{
        /*overflow: auto;*/
        /*display: table;*/
        height:400px;
    } 

  <div class="parent">
      <div class="div1"></div>
      <div class="div2"></div>
      <br style="clear:both;">
  </div>
  <div> this is a test</div>

8.父元素也一起浮动
让父元素和子元素成一个整体
...
    .parent{
        /*overflow: auto;*/
        /*display: table;*/
        /*height:400px;*/
        float:left;
         background:blue;
         width:98%;
    }
....