Css学习之清除浮动

浮动：float:left/right 会使元素脱离文档流 可以用以块级元素排版例如卡片式展示商品

    使用了float 就可能会引起父及元素高度坍塌；

     解决方法：

        1：添加div空元素 并设置样式 clear:both;height:0;overflow:hidden

            clear有三个属性 left、right、both 表示当前元素不会因为之前的元素浮动而去补上因float引起的位置空缺，

            加一个div空元素 设置clear则会使div往float元素下方放。从而使父元素的高度拉高

        2 : 父级元素添加overflow:auto; zoom:1

          当一个块级元素设置设置了overflow 时，这个元素就是一个块级排版上下文(BFC), 就相当于在window 下面创建一个function 会有自己独立的作用域，内部的排版与外部独立。块级排版上下文可以包含浮动流，并且所有子元素都为浮动也不会引起高度塌陷，因此可以用此方法解决高度塌陷。

        3: 父级元素添加 伪类:after{ content:""; display:block; visible:hidden;lear:both}

        4: 父级元素也浮动 但是这样会有问题 1） 父级元素的宽度不固定了需要设置

                                                              2）父级也浮动了