CSS清除浮动（整理自网络，面试/笔试题，实际操作有效）

css清除浮动

原：

<div class="con">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
<style>
  .con{
    width: 100px;
    border: solid 2px red;
    background-color: orange;
  }
  .a{
    width: 40px;
    height: 50px;
    border: solid 2px blue;
    background-color: yellow;
    float: left;
  }
  .b{
    width: 40px;
    height: 50px;
    border: solid 2px blue;
    background-color: yellow;
    float: right;
  }
</style>

效果：

因为浮动，效果显示上子元素像是脱离了父级。

解决办法：
1、父级元素样式设置 height
2、父级元素样式也设置 float
3、浮动元素结尾增加空div标签，并设置样式 clear:both; 清除浮动
    （ clear 不允许元素周围有浮动元素，可设置left、right、both、none、inherit ）
    （ 但若网页浮动效果部分较多可能会用到多个空div标签，容易造成混乱 ）

<div class="con">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c" style="clear:both"></div>
</div>

4、设置父级 伪元素 :after 和 zoom

  .con:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
    /* :after 要IE8以上及非IE浏览器才支持 */
    /* content 为空时前3行为必须 */
    /* content 与伪元素 :before 或 :after 配合生成内容 */
    /* 若内容非空后2行也需要，可以隐藏文本，故完整为此5行 */
  }
  .con{
     zoom: 1;
     /* 解决IE6、IE7浮动问题 */
     /* zoom这个属性是IE专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 */
     /* 在非IE浏览器zoom有缩放效果，但火狐浏览器不支持 */
     /* 这个属性是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来实现div 的缩放效果，现在要放大或者缩小直接用css3的transform属性。 */
   }

5、父级元素样式设置 overflow: hidden;
    （ 使用overflow:hidden时，不能设置height，浏览器会自动检查浮动区域的高度 ）
    （ 由于超出的尺寸的会被隐藏，不能与 position 配合 ）

解决后效果：