Home  >  Article  >  Web Front-end  >  How to use css float attribute

How to use css float attribute

藏色散人
藏色散人Original
2019-05-27 17:36:192685browse

css float attribute is used to specify whether a box (element) should float. Absolutely positioned elements ignore the float attribute!

How to use css float attribute

#How to use the css float attribute?

Attribute definition and usage instructions

The float attribute specifies whether a box (element) should float.

Note: Absolutely positioned elements ignore the float attribute!

Default value: none

Inheritance: no

Version: CSS1

JavaScript Syntax:

object.style.cssFloat="left"

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.

inherit specifies that the value of the float attribute should be inherited from the parent element.

Example

Let the image float to the right:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></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="How to use css float attribute" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

Effect:

How to use css float attribute

The above is the detailed content of How to use css float attribute. 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:How to use html mark tagNext article:How to use html mark tag