为什么css浮动没有效果是怎么回事呢?

html-css010

为什么css浮动没有效果是怎么回事呢?,第1张

在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: 不允许右边有浮动对象

1、使用场景:

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

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

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

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

2、浮动引发的BUG:

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

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

3、解决办法:

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除

    

先看下你自己用的什么版本ie,查下 class^="mpg" 这个选择器你那个版本 ie 是否支持,不支持的话老老实实的写:

.mpg_banner div{float:left} /*如果 mpg_qq 之类的 div 里面不会再出现 div 的情况下*/

如果 mpg_qq 之类的里面还可能有 div 就写:

.mpg_qq , .mpg_tel , .mpg_......{float:left}

然后就没有然后了..

再然后告诉你:

这种地方你用定位比浮动方便得多,把 mpg_banner 相对定位,里面的 qq、tel 什么的全部绝对定位。因为这些玩意高度、设计样式都是固定的,不会出现经常变换的内容把高度撑开,完全可以用定位。网页内容区之类的地方,里面内容高度每页都在变化的地方才浮动成左右栏目。

再然后,真的没有然后了...