What does float mean in css-CSS Tutorial-php.cn

What does float mean in css

WBOY

Release： 2021-12-22 16:48:35

Original

6014 people have browsed it

In CSS, float means "floating". The float attribute is used to define the floating direction of the element. When the float attribute is set on an element, the element will float on other elements, and it will move in the direction according to the attribute value. Left, right or not floating, the syntax is "element {float:value;}".

What does float mean in css

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

What does float mean in css?

In css, the float attribute is used to define the direction in which the element floats. The syntax is "element {float :value}"; when the value of the attribute is "left", the element can be set to float to the left; when the value of the attribute is set to "right", the element can be set to float to the right; when the value of the attribute is set to "none", the element can be set not to float. .

The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.

If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible.

If there is very little space for a floating element on a row, then the element will jump to the next row, and this process will continue until a certain row has enough space.

The example is as follows:

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img  src="/i/eg_cute.gif" / alt="What does float mean in css" >
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

Copy after login

Output result:

What does float mean in css

(Learning video sharing: css video Tutorial)

The above is the detailed content of What does float mean in css. For more information, please follow other related articles on the PHP Chinese website!