CSS中元素的浮动用float属性。

css float属性

float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。

元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间，这样会导致后面的元素上移并占用原本属于该元素的空间。

属性值

  • left 元素向左浮动。

  • right 元素向右浮动。

  • none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

float属性的理解

1、float属性仅对使用该属性的元素本身以及后面的元素产生影响（后面元素会上移–>页脚块上移）。

2、内联元素使用了float属性后就会变成块级元素，就可以设置元素的高度和宽度(参考A标签)。

3、 float属性一般配合后面标签的clear属性共同使用，以便清除float属性带来的对后面元素的影响。

4、使用float属性的元素，如果未设置元素宽度，则元素宽度自动调整为适应内容的宽度（参考内容DIV–内容块的大小未定义，则自动调整）。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML中文网</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

效果图：

CSS中元素的浮动用什么属性

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。