css 清除浮动float 嗒嘀嗒滴 ----20181120

1. 手动给父元素添加高度
2. 通过clear清除内部和外部浮动
3. 给父元素添加overfloat属性并结合zoom:1使用
4. 给父元素添加浮动　　　　　　　　

　　　　常用方法：

　　　　　　①```给兄弟元素添加clear属性：添加一个class为clear：both，

　　　　　　②```添加伪类：.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容；

    　　　　　　　　　　　　　　　　　　content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。

    　　　　　　　　　　　　　　　　　　display: block;   <----加入的这个元素转换为块级元素。

    　　　　　　　　　　　　　　　　　　clear: both;     <----清除左右两边浮动。

  　　　　　　　　　　　　　　　　　　  visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；

  　　　　　　　　　　　　　　　　　　  height: 0;     <----高度为0；

  　　　　　　　　　　　　　　　　　　  font-size:0;    <----字体大小为0；

　　　　　　　　　　　　　　　　　　　}

　　　　　　③'''给父元素添加after伪类

　　　　　　　　　　　　　　.clearfix::before,

　　　　　　　　　　　　　　.clearfix::after{

    　　　　　　　　　　　　　　　　　　　　content: ".";display: block; height: 0;overflow: hidden;

　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　.clearfix:after{

    　　　　　　　　　　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　.clearfix {

    　　　　　　　　　　　　　　　　　　　　zoom: 1; /* IE < 8 */

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　④`````给外层div加.clearfix:after {visibility: hidden; 和display的区别 前者隐藏行列还占据空间   display: block; 必须写  font-size: 0;

  　　　　　　　　　　　　　　　　　　　　　　　　content: " "; 必须写

  　　　　　　　　　　　　　　　　　　　　　　　　clear: both; 必须写

 　　　　　　　　　　　　　　　　　　　　　　　　 height: 0; 必须写

　　　　　　　　　　　　　　　　　　　　　　　　}