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

html-css09

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

在div+css中浮动不起作用,可能是原因是你设置flaot的这个元素不是块级元素,所以float对它是不起任何作用的,如span和a这些标签,我这里写个代码:

<html>

<head>

<style>

#sub{ //通过id实现

width:300px //只是假定的值,需要根据实际的要求写。

height:30px

float:left

}

span{ //通过id实现

width:300px

height:30px

float:left 不是块级元素,不会有float属性的

}

</head>

<body>

<div>

<div id=sub>测试文字,</div>

<span>我不会浮动的</span>

</div>

</body>

</html>

我们想要浮动的话,只要将span那在加一个display:block;就能够实现浮动了。

出现这种情况是因为你在CSS

#div_diary中设了overflow为hidden

。而.ldt中又设了float:left。这样2010-5-21会靠在最左边,在DIV中就会溢出,被稳藏掉了。

你可把CSS改为

#div_diary{

border-bottom:1px

dashed

#CCCCCC

margin-bottom:20px

width:65%

height:50px

overflow:hidden

}

境加宽度。

或把overflow:hidden去掉。