子元素浮动导致父元素坍塌的原因和规避方法

洪七公

说得那么玄幻，实际就是几个div上下排列，如果没有设置高度，下面的div就会挤上来的意思，使之页面错位

那么消除不设置高度而引起的上下盒子错位的方法有什么呢？那就需要清除元素的浮动，方法有下面几个：

1 给父元素设置高度

2 额外标签法 :在最后添加一个块级元素的盒子 . .clear{clear:both;}

3 单伪元素清除法(京东)

.clearfix::after{

content:'';

display:block;

clear:both;

height:0;

visibility:hidden;

}

4 双伪元素清除法(小米)

.clearfix::before,

.clearfix::after {

content: '';

display: table;

}

.clearfix::after {

clear: both;

}

5 给父元素设置 overflow: hidden;

我一般是选择第5种方法，简单方便！