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

html-css010

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

1、使用场景:

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

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

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

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

2、浮动引发的BUG:

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

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

3、解决办法:

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除

    

在CSS中使用float指定浮动属性值,该属性的值指出了对象是否及如何浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中,所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法:float:none | left | right1、float取值none: 设置对象不浮动,默认值left: 设置对象浮在左边right: 设置对象浮在右边2、float的特性a)、浮动元素会从标准流中脱离b)、浮动元素会触发BFC(块级元素格式化)、不影响外边距折叠c)、 float元素会变成块标签如果float不是none,当display:inline-table时,display的计算值为table;当display:inline | inline-block | run-in | table-* 系时,display的计算值为block,其它情况为指定值。float在绝对定位和display为none时不生效: 当display为none时元素会隐藏,所以float意义不大;当position为absolute绝对定位时元素也将从标准流中脱离,元素使用偏移量移动,float特性无效。浮动元素间会堆叠: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素不能溢出包含块: 浮动元素在包含块内,当包含块的宽度不足以容下浮动的子元素时,将自动折行;垂直方向当包含块认为浮动的子元素没有高度时,子元素会溢出,BFC能解决该问题。水平方向不会溢出,垂直方向有可能会溢出清除浮动该属性的值指出了不允许有浮动对象的边。clear:none | left | right | both适用于:块级元素取值:none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right: 不允许右边有浮动对象

网络信号差。css用伪元素清除浮动不得行是网络信号差导致的。该软件是一款非常需要网络状况优秀的平台,在网络不佳的时,会导致此平台连接失败无法查看信息以及不得行等情况,可将其更换网络为优秀网络即可。元素在生活中像氢,氦,氮,氧,氟,氖,氯,氩,氪,氙,氡一样,都是同一类型的化学元素。