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

Home

Web Front-end

CSS Tutorial

What does float mean in css

醉折花枝作酒筹

Jul 14, 2021 am 10:32 AM

cssfloat

CSS Floating is a method of taking an element out of the document flow, causing it to move to the left or right and the elements around it to rearrange. Float is often used for images, but it is also very useful in layout.

What does float mean in css

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

The so-called CSS floating means that the floating element will break away from the normal flow of the document and move to the left or right according to the value of float until its outer boundary touches the inner boundary of the parent element or the outer boundary of another floating element. until.

If the A element floats, and the element originally ranked after the element finds that the A element is no longer in the document flow, it will ignore it and connect it to the element in front of the A element (PS: But the text does not It will ignore it and wrap around the A element, which means that the A element does not break away from the text flow.

What does float mean in css

CSS's Float will move the element to the left or right , the elements around it will also be rearranged. Float (floating) is often used for images, but it is also very useful in layout.

When using float to break away from the document flow, other boxes will ignore this element. But the text in other boxes will still make room for this element and wrap around it (it can be said to be partially ignored).

Since the floating box is not in the normal flow of the document, the block in the normal flow of the document Level elements behave as if the floated element does not exist.

For elements that are separated from the document flow using position:absolute, other boxes and text within other boxes will ignore it.

Elements are floated :

The horizontal direction of the element floats, which means that the element can only move left and right but not up and down.

A floating element will try to move left or right until its outer until the edge touches the border of the containing box or another floated box.

Elements after the floated element will wrap around it.

Elements before the floated element will not be affected.

If the image is right-floated, the following text flow will wrap to the left of it:

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="/static/imghwm/default1.png"  data-src="logocss.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="What does float mean in css" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

Rendering:

What does float mean in css

Recommended learning: 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!

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