Float的清除

清除浮动

今天学习了下清除浮动：
第一种：直接在div中clear:both;//比如我想div4有清除浮动的效果直接对div4进行
样式设置clear:both;

   <div id="div1">
   	<div id="div2"></div>
   	<div id="div3"></div>
   	<div id="div4"></div>
   </div>

第二种: 在需要清除浮动的位置创建一个div clear:both；//比如我想div4具有清除浮动的效果就在div4的前面加上一个div对此div进行样式设置clear:both;也可以

  <div id="div1">
   	<div id="div2"></div>
   	<div id="div3"></div>
   	<div id="clearDiv"></div>
   	<div id="div4"></div>
   </div>

两种后者更方便使用如想更换清除浮动的位置只需要直接更改div的位置就可以了
第三种：使用伪元素进行清除//使用的基本都是这种

  #clearDiv::after{  
    content: "";    //使div中有内容但是不需要具体内容就相当于占位
    visibility:hidden;   //为了防止误操作使div中存在内容，造成排版混乱此操作进行内容隐藏
    height: 0px;  //以免一些操作使此div存在行高将此行高设置为默认值0px；
    display: block;//进行块级显示
    clear: both;清除浮动
}
解决兼容性问题


 #clearDiv{
  zoom:1;
 }