【css】浮动的影响及解决方法(父元素无高度，而子元素有高度)

当一个元素内只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，即出现高度为0的情况，这样会导致后面接着的内容与上面内容出现重叠现象，针对这个问题分享几种解决方法：

1、直接给父元素设定height

ul {
    list-style-type: none;
    height: 30px; /*添加高度属性*/
}

2、父元素设置overflow属性值–auto|hidden

ul {
    list-style-type: none;
    overflow: hidden; /*添加高度属性*/
}

3、子元素中添加一个同级空div,设定clear:both

<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<div style="clear:both;"></div> <!--新添加的空div，它和浮动元素同一级别，且位于最后-->
</ul>

4.父元素添加zoom属性，适用于IE

IE支持一个CSS属性zoom，当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。设置为zoom:1，代码如下：

ul {
    list-style:none;
    zoom:1; /* 适用于IE */
}

5.利用伪元素:after
用这种方法时要为包含元素先添加一个类名，这里为ul标签设置的类名.clearUl

<ul class = "clearUl"> <!--为包含的外围元素设置类-->   
<li><img src = "1.jpg" /></li>   
<li><img src = "2.jpg" /></li>   
<li><img src = "3.jpg" /></li>   
<li><img src = "4.jpg" /></li>   
<li><img src = "5.jpg" /></li>   
<li><img src = "6.jpg" /></li>   
</ul>   

ul {   
list-style-type: none;   
width: 800px;   
background: blue;   
}   
li {   
float: left;   
}   
/*利用:after伪元素*/   
.clearUl:after {   
content:"";   
display: block;   
clear: both;   
}  

在:after为元素里面用到了content属性，这样这条样式的意思是在ul元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除ul标签的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用

原文链接：
http://blog.csdn.net/cedar777/article/details/53886182
https://www.jianshu.com/p/ad2eb3f650b9
http://blog.csdn.net/marsggbo/article/details/70227255

利用伪元素清除浮动的写法

.clearfix:before,
.clearfix:after{
    content:"";
    display:table
    }

.clearfix:after{
    clear:both
    }

.clear{
    display:block;
    overflow:hidden;
    visibility:hidden;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    clear:both
}