How to use float? css: float floating usage summary-CSS Tutorial-php.cn

How to use float? css: float floating usage summary

伊谢尔伦

Release： 2017-06-05 15:33:13

Original

2873 people have browsed it

For developers, float needs to be used frequently, and they are basically inseparable from it, but they often endure all the pain it brings to you. Maybe you think it has only a little knowledge, but you really Can you control it? CSS float is what we call label objects floating to the left (float:left) and floating to the right (float:right). Floating can be understood as making a DIV element break away from the standard flow and float on the standard flow. It is not at the same level as the standard flow. This chapter will talk about how to use float.

You can first learn free courses related to php Chinese website

1. Learn "CSS Online Manual" CSS Float(Floating) Course

2. Watch "Dark Horse Programmer CSS Video Tutorial" The floating chapter in

#float floating related content

Detailed explanation of the usage of float that you don’t know

The original design intention of float is to achieve a mixed arrangement of pictures and text, so that the text can surround the picture. Today's usage is basically to achieve horizontal layout. Although it is a "misuse", it can often achieve the effect we want. Most people know how to use float, but not everyone knows the principle and original design intention of float.

css float-float/clear detailed graphic and text explanation

If a p element A is floating, and if the previous element of A element is also floating, Then the A element will follow the previous element (if these two elements cannot be placed on one line, then the A element will be squeezed to the next line); if the previous element of the A element is an element in the standard stream, then the relative verticality of A The position will not change, which means that the top of A is always aligned with the bottom of the previous element.

The correct usage of float, 90% of people use it incorrectly

float also has a very useful feature, which is to clear spaces. I won’t post a picture of this, just a description. For example, if I put a picture in a p, there will be a few pixels of space between the pictures by default, which can also be called a gap. But often this gap or space is not what we need. At this time, we only need to give the image a float to separate it from the document flow, and the images will fit together perfectly.

Two ways to adapt the height of multiple div floating floats in css

When using Div + CSS for three-column or two-column layout, make two columns (or three columns) have the same height, which is easy to achieve with Table, but it is more troublesome to use Div + CSS. According to the general practice, most of them use background image filling or JS script to make the height the same.

Detailed explanation of float floating in CSS

The origin of a.float

The original design of floating is used to create a wrapping effect for text, which is also the design What the author wants us to do.

b.float parameters

There are three parameter values for the float attribute:

Left: Indicates that the element floats on the left.

Right: Indicates that the element floats to the right.

None: The object does not float and follows the standard document flow.

c. Effect display (take float: left as an example, the case of float: right is just a difference in position)

CSS basic knowledge - detailed introduction to float

Floating has 4 attributes: left (left floating), right (right floating), none (not floating), inherit (inherit).

The containing block of a floating element is its nearest block-level ancestor element.

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