Css浮动问题

我们都知道浮动的出现是为了解决图文环绕效果，但随着需求的变化，浮动后来变成了布局的一种。因为浮动可以完美解决块元素一行排列问题。你会说不是可以转行块吗

那我们来看一下，转行内块排列的效果

大家应该发现了是有 缝的。在开发工作中是不行的。但如果把div放在一行是可以解决这个问题的。但是我们不可能把所有div放在一行。

所以浮动的出现完美了解决这个问题

 但浮动之后会出现一些问题

1.外边距合并问题：会显示大的一个。

 解决：只给一个盒子设置。

 2.外边距塌陷问题：给子设置边距时把父亲也拉下来了

 解决：父元素设置overflow：hidden

 3.最重要的第三点是当父级无高度时，子浮动之后、父级同级的元素就会顶上来。这时我们会清除浮动带来的影响。

 

解决：

1.父元素添加over：hidden（直接隐藏不建议用）

2.父元素后边加一个div 设置clear：both  （也很少用）

3.伪元素做法 （建议用法） 父元素::after{

content: '';

                conten:''

                display: block;

                clear: both;

                height: 0;

                visibility: hidden;

(后两句解决兼容问题)

}

这样就好了