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

html-css023

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

1、使用场景:

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

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

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

浮动元素的卡顿:元素高度大于其他元素;

2、浮动引发的BUG:

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

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

3、解决办法:

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除

    

最近在用element ui做后台管理系统,左侧菜单比较多了,所以需要拉动网页滚动条才可以看完整个菜单,

所以就把顶部导航浮动 fixed后 到一定高度就浮动起来,

但是中途遇到一个大坑,就是在浏览器中,滚动发高度刚好在导航需要浮动的高度山下不断 上下滑动滚动条的时候 ,页面会出现不断的闪烁,不知道大家有没有遇到个这样的bug

好了 不批话多了,直接看解决方法

重点来了。。。。。。。。

尼玛重点在那点啊。。

接到往下来 就是在我浮动的导航div外面在包一层div 就觉得了