Home > Article > Web Front-end > What attributes are used to float elements in CSS?

What attributes are used to float elements in CSS?

青灯夜游Original: 2021-03-22 10:56:034137browse

The float attribute is used to float elements in CSS. The float attribute is used to define in which direction an element floats; after an element uses the float attribute, the element can be separated from the standard flow itself and float on top of other elements, so that it no longer occupies the space originally belonging to the element, but it will also cause Subsequent elements move up and take up space that originally belonged to that element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The float attribute is used to float elements in CSS.

css float attribute

float, as the name suggests, is floating. Elements with the float attribute set will float to the left or right according to the attribute value. We call it setting Elements with the float attribute are floating elements.

After an element uses the float attribute, the element can be separated from the standard flow itself and float on top of other elements, so that it no longer occupies the space originally belonging to the element. This will cause the subsequent elements to move up and merge. Takes up space that originally belonged to the element.

Attribute value

#left The element floats to the left.
right The element floats to the right.
none Default value. The element is not floated and appears where it appears in the text.

Understanding of float attribute

1. The float attribute only affects the element itself that uses this attribute and subsequent elements (the subsequent elements will move up--> Footer block moved up).

2. After the inline element uses the float attribute, it will become a block-level element, and the height and width of the element can be set (refer to the A tag).

3. The float attribute is generally used together with the clear attribute of the following tags to clear the impact of the float attribute on the following elements.

4. For elements using the float attribute, if the element width is not set, the element width is automatically adjusted to fit the width of the content (refer to content DIV--the size of the content block is not defined, so it is automatically adjusted).

[Recommended tutorial: CSS video tutorial]

Example:

<!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"    style="max-width:90%"  style="max-width:90%" / alt="What attributes are used to float elements in CSS?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

Rendering:

What attributes are used to float elements in CSS?

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What attributes are used to float elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use pure css to achieve simple loading animation effect (code example)Next article：Use pure css to achieve simple loading animation effect (code example)

See more

What attributes are used to float elements in CSS?

Related articles