How to set float in css-CSS Tutorial-php.cn

How to set float in css

醉折花枝作酒筹

Release： 2023-01-05 16:10:17

Original

8649 people have browsed it

In CSS, you can use the float attribute to set float. You only need to set "float:left|right|none" for the element; where left means floating to the left, right means floating to the right, and none means the element Does not float and appears where it appears in the text.

How to set float in css

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

Floating can be set through the float attribute in css. 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.

float attribute:

If non-replaced elements are floated, an explicit width is specified; otherwise, they are made as narrow as possible.

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

Possible values for the float attribute:

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.

css setting floating example:

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img  src="猫/images/1.jpg"    style="max-width:90%"/ alt="How to set float in css" >
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
</p>
</body>
</html>

Copy after login

Running results:

How to set float in css

The floating box can be left or to the left Move it right until its outer edge touches the border of the containing box or another floated box. Because the floated box is not in the document's normal flow, a block box in the document's normal flow behaves as if the floated box does not exist.

The benefit of floating is of course layout, such as floating to form a three-column layout, text wrapping, etc. But floating also has a problem, that is, it will cause the height to collapse. As the picture above shows, the height of the parent element collapses and the floating child elements are not wrapped, which will cause layout errors.

Recommended learning: css video tutorial

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