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

html-css013

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

1、使用场景:

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

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

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

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

2、浮动引发的BUG:

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

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

3、解决办法:

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除

    

允许其他元素包围一个元素。关于css浮动正确的是允许其他元素包围一个元素。css浮动是一种使元素脱离普通标准流控制的方法,元素会根据float的值向左或向右移动,直到外边界碰到父元素的内边界为止。