CSS float 属性值说明
值 | 描述 |
---|---|
none | 意味着元素未浮动,它将显示在文本中的位置。这是此属性的默认值。 |
left | 意味着元素浮到左侧。 |
right | 意味着元素漂浮到右侧。 |
initial | 使属性使用其默认值。 |
inherit | 从父母元素继承属性。 |
语法
float: none | left | right | initial | inherit;
浮动属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> img { float: right; background: #ccc; } </style> </head> <body> <h2>Float 属性示例</h2> <img src="/onitroad-logo.png" alt="W3dcos"> <p> 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。 是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。 </p> </body> </html>
在以下示例中,图像向左浮动。
使用 float 属性浮动图像的示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> img { float: left; background: #ccc; } </style> </head> <body> <h2>Float 属性示例</h2> <img src="/onitroad-logo.png" alt="W3dcos"> <p> 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。 是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。 </p> </body> </html>
float 属性定义元素应该放置在容器的哪一侧,从而允许文本或者其他元素环绕它。
该属性具有三个值:none、left 和 right。
此属性与 clear 属性直接相关,该属性定义元素是应该在浮动元素旁边还是应该在浮动元素之下(clear)。
如果元素是绝对定位的(位置:绝对),则浮动属性将被忽略。
初始值 | none |
---|---|
应用于 | 所有元素。 |
继承 | 无效 |
可动画的 | 无效 |
版本 | CSS1. |
DOM 语法 | object.style.cssfloat = "right"; |
日期:2020-06-02 22:14:30 来源:oir作者:oir