怎么解决css浮动？

html-css019

怎么解决css浮动？,第1张

使用float来使层浮动起来，使用clear:both来清除浮动，一般情况下在一个div中，会有三个层，第一个层左浮动，第二个层右浮动，第三个层用来清除浮动。最外层的层要使用：overflow:hidden来使外边框达到内层浮动层的高度。

1、使用场景：

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

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

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

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

2、浮动引发的BUG:

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

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

3、解决办法：

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除