css 中的浮动使用场景和引发的BUG及解决办法

1、使用场景：

改变元素的排列方式的时候会用到浮动

浮动的元素会脱离文档流，正常的文档流视其而不见

浮动元素的停止：找到父元素的边框停止

浮动元素的卡顿：元素高度大于其他元素；

2、浮动引发的BUG:

1、父元素不设置高度，所有子元素都浮动

2、浮动的子元素撑不开父元素的高度

3、解决办法：

1、给父元素添加overflow: hidden

2、给父元素添加最后一个子元素 clear：both  清除浮动

3、能设置高度的元素都设置高度

4、伪类元素清除