How do I control the image custom float with CSS properties on the page? Example

Novice in the design of Web pages, occasionally on the picture floating problem will have some trouble, do not know where to start. This article is mainly to introduce you to CSS floating related knowledge, I hope to need a friend to help. First of all, we need to know about one of the important properties of CSS floating float.

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element. If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

CSS picture floating (left) the specific code example is as follows:

<! DOCTYPE html>
The above code test results such as:


CSS picture floating (right) The specific code example is as follows:

<! DOCTYPE html>



Note: The float property is supported by all major browsers. The attribute value "inherit" is not supported by any version of Internet Explorer (including IE8).

If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.

Summarize the possible values of float:

The left element floats to the left.

The right element floats to starboard.

None default value. The element does not float and appears in its position in the text.

Inherit specifies that the value of the float property should be inherited from the parent element.

So through this article about CSS how to let the picture floating problem introduced here, I hope you have some help, for reference.