Home > Web Front-end > Front-end Q&A > How to use css float attribute

How to use css float attribute

藏色散人
Release: 2019-05-27 17:36:19
Original
2738 people have browsed it

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"
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template