How does float work? Css:float Floating Usage Summary

For developers, float floats need to be used frequently, basically without it, but often endure the pain it brings to you, perhaps you think it is a little knowledge, but you really can control it? CSS float float is what we say tagged objects float left-to-left (float:left) and floating right-right (float:right). Floating can be understood as leaving a DIV element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows. This section will talk about how float floats are used.

You can learn the free course of the PHP Chinese web first

1. Learn css float (floating) course in CSS online manual

2. Watch the floating chapters in the Dark Horse Programmer's CSS video tutorial

float Float related content

1. Float float You don't know how to use the explanation

The original design of float was designed to achieve text-to-image blending and to surround the picture. Today's usage is basically to achieve horizontal typesetting, although it is a kind of "misuse", but often can achieve the effect we want. Most people know to float, but not everyone knows the principle and design of float.

2. CSS Floating-float/clear text

If a P element A is floating, if the previous element of a element is also floating, then a element will follow the previous element (if the two elements are not placed in a row, the a element will be squeezed to the next line), and if the previous element of a element is an element in the standard flow, the relative vertical position of a will not change. This means that the top of a is always aligned with the bottom of the previous element.

3. The correct use of float, 90% of the people are using the wrong

Float also has a very useful feature, which is to clear the space. I'm not going to put a picture on this, so I'll just describe it. For example, in a p inside put my picture, the picture and the picture by default will have a few pixels of space, also can call the gap. But often this gap or space is not what we need, this time just give the picture a float, let it out of the flow of the document, the picture and picture will be perfectly together.

4. css multiple div floating float height adaptive two methods

When using div + CSS for a three-column or two-column layout, it's easy to make the two columns (or three columns) the same height, but using a div + CSS makes it more cumbersome. As a general rule, most of the methods used to fill or JS script with background map are of the same height.

5. Detailed CSS float float

The original design of A.float's origins was designed to surround the text, which is what designers want us to do.

Parameters of the B.float

The value of the float property has three parameters:

Left: Indicates that the element floats on the ieft.

Right: Indicates that the element floats on the left.

None: Objects do not float and follow the standard document flow.

C. Effect display (take float:left as an example, the situation of float:right is only the difference of location)

6. CSS Basics Float Detailed Introduction

There are 4 properties for floating: Left (floating), right (floating), none (non-floating), Inherit (inherited). The containing block of a floating element is its nearest block-level ancestor element.

The floating element is left offset (or right offset) until its outer boundary touches the inner boundary of the containing block or the outer boundary of another floating element.

Related questions

1. How to solve the problem of float element falling

2. When using the Float property in HTML, the parent element height becomes 0, how to solve?

3. Under what conditions does float fail?

"Recommended"

1. PHP Chinese Web Free Tutorial: "CSS 0 Basics Primer Tutorial"

2. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"