返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

css float属性使用实例代码

时间:2010-05-15 00:36来源:知行网www.zhixing123.cn 编辑:麦田守望者

float定义
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

浮动非替换元素要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

基本的浮动原理

  Any element may be floated. Paragraphs, div's, lists, tables, and images can all be floated, and in fact even inline elements like "span" and "strong" can float just fine.
  任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。

  Any element that is declared to be a "float" is automatically made a "block level element," meaning it can have both a declared "width" and "height." In fact, floats are currently required to have a declared width, but this is not what modern browser makers think, and the W3C has come to agree. The consensus now is that a float with no assigned "width" should "shrink-wrap" to the width of the float content. So a float with an image inside will be as wide as the image, and a float with text will be as wide as the longest text line in the float.
  任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。事实上,floats当前被要求具有一个申明的宽度,但这不是现代浏览器制造者的思路,W3C以及开始同意这样的作法。现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。因此,内部带有图片的一个float将和图片一样宽,带有文本的一个浮动将与该浮动内的最长文本行一样宽。

  The CSS2.1 rules for floats now say: "If 'width' is computed as 'auto', the used value is the 'shrink-to-fit' width". All modern browsers already do this, except for IE5/Mac. That browser will be buggy unless the float has some kind of specified width. These days most savvy coders will let browsers shrink-wrap their widthless floats and use a hiding hack to "feed" IE5/Mac a width for the float. It might not be as pretty, but that is a very minority browser now and Mac users have several quality alternatives too. Microsoft has ceased to support IE5/Mac, so perhaps it's too much to ask that a highly useful feature like float shrink-wrapping be avoided, just so that IE5/Mac users won't see misshapen floats.
  CSS2.1的浮动规则中这样讲: "如果 width 是以 auto 方式计算得到,使用的值是 shrink-tofit 伸缩到适合的宽度。" 所有现代的浏览器已经这样做,除了IE5/Mac。除非浮动具有某种指定的宽度,否则该浏览器会变得错误百出。现在大多数聪明的编码人员会让浏览器伸缩其没有宽度属性的floats, 并使用一个隐藏的专门给IE5/Mac的宽度知识。这可能不算很巧妙,但是它是现在不能满足该规范的极少数的浏览器,同时Mac用户有几种更好的选择。MS停止了对IE5/Mac的支持,因此寻求像伸缩包装式浮动这样有用特性被避免的代价太高了,这样只有IE5/Mac用户不会看到错误的浮动。

浮动是如何进行的

  Floats are "removed from the flow," but unlike absolutely positioned elements (layers), floats do get displayed directly after the last block element that precedes them (just like block boxes do). If the float is inside a "line box," the float's upper edge is placed level with the top of the line box. But other than that, floats are similar to absolute elements, in that ordinary block boxes totally ignore both floats and AP elements. Those static block boxes just keep "flowing" one after another as though the float were not there.
  浮动"从流程中被移除出来", 但是与绝对位置的元素(层次)不同,浮动是在他们前面的最后一个块元素之后直接被显示出来(就像块盒一样)。如果该浮动是在一个“行块”中,该浮动的上边界被放置在行块顶部的水平上。当除此以外,浮动与绝对元素相似,原先的块盒会完全忽略浮动和AP元素。那些静态的块盒知识保持一个接一个地”跟随“,就好像没有浮动不在那里一样。

  The following is minimal code for the example graphic:

代码:
<div style="float:left; width:40%;"><p>Float text</p></div>
<p>
Paragraph text outside the float
</p>
  Shows how line boxes are shortened in the presence of a float. You can get inline elements like text and images to go along the side of a float and continue below it, just like using the good old (but deprecated) "align=left" on an image. Floats, however, are much more versatile than that.
  上例展示了行盒在一个浮动中是如何被削短的。你可以让行内元素(像文本、图像)在一个浮动的边上放置并且在它的下面继续,就好像使用很好的老式(不过已过时)图像的属性"align=left"。浮动,比这要灵活的多。

  It is a common misconception that block elements following a float are made to run down the side of the float, but that is not correct. Actually, it is only the "line boxes" within those block elements that behave so. (Please see the first screen shot image.)
  认为跟在一个浮动后面的块元素会被设置为放置在浮动的下方是通常的一个误解。事实上,只有在哪些块元素内部的”行盒“才会这样。

  Remember that I mentioned that floats are removed from the document flow? The specs require that line boxes that would pass behind a float be shortened enough to keep the line box out in the open. That means text and inline images cannot ever be covered by a float, unless one or both are in separately positioned containers. That is, if a float were nested in an absolutely positioned element, and that AP element were made to overlap a paragraph, the line boxes in the paragraph would not be shortened by the float, due to their different contexts. Rather, that text would indeed be covered by the float.
  还记得我提到的浮动被从文档处理流程中移除出来的话吗?标准要求在一个浮动后面的行盒被进行足够的削短以保持行盒在外部开放区。这表示文本和行内的图像永远不会被浮动覆盖,除非他们其中之一或两个在独立的、指定位置的容器中。这就是说,如果一个浮动被嵌套在一个绝对位置的元素中,并且AP元素被设置为覆盖一个段落,在段落中的行盒不会被浮动削短,这是因为他们不同的上下文环境造成的。而且,文本的确会被该浮动覆盖。

------分隔线----------------------------
标签(Tag):div+css
------分隔线----------------------------
推荐内容
猜你感兴趣