clear解决float高度塌陷的原理

浮动是网页布局常用的一个手段，可以让元素脱离文档流按照我们想要的布局方式进行布局，但元素浮动后会使得其他元素与其相对位置关系发生变化，也会使得父元素产生高度塌陷问题。

为了解决float带来的副作用，我们可以根据BFC渲染规则，即BFC拥有自己独立的区域，能包含浮动子元素的高度，不会与浮动元素发生重叠等特性。一般通过以下方式创建BFC：

            1、该元素的float不为none(left/right)

            2、该元素position的值不为static和relative（fixed/absolute)

            3、该元素display的值inline-box，table(跟tables相关的几个，比如table-cell)

            4、该元素的overflow的值不为visible(hidden/auto)

但以上方式依然会有各自的副作用，因此开发中最完美的解决方案是使用clear来清除浮动对当前元素所产生的影响。

clear-作用：清除浮动元素对当前元素所产生的影响

        -可选值：

                left：清除左侧浮动元素对当前元素的影响

                right：清除右侧浮动元素对当前元素的影响

                both：清除两侧中最大影响的那侧

原理：设置清除浮动以后，浏览器会自动为该元素添加一个值为浮动元素高度的上外边距margin-top，使其位置不受浮动元素的影响。

因此对于因为子元素浮动，而产生的高度塌陷问题，只要给浮动子元素的兄弟元素设置clear，就能解决。实际开发中，一般使用给父元素的伪元素::after设置clear，来解决高度塌陷问题。