CSS float float is a mix ball

Have to say, in the study of CSS has been puzzled, the horizontal layout why to use the property of float,

With a high degree of collapse, how do you not invent the attributes of advanced points to complete the horizontal layout?

Even everyone told me to abandon the table layout, floating layout is the product of the div+css era.

I didn't have a choice, now think about it, it's been so many years, maybe I should go back to see it.

In fact, the people who made CSS at the time may not have thought of using float to layout, up to a word of the kind of text wrapping is good,

Or the layout is not the work of float, you have heard of building a house may be floating around this way ...

Even now there are many ways to solve the high collapse,

For example, Overflow:hidden on the layout of the impact, and so you meet you will find this guy God bored, originally wanted to expose part of the results can not come out, hehe hehe.

On the other hand, the individual thinks that with the change of the Times, the interactive demand of Web pages will double, not only in the construction and layout, but also more dynamic/micro-data breakthroughs,

So: Before and: After there will be more applications, to remove the floating is really overqualified.

In contrast, Inline-block seems to be more like a horizontal layout design. Inline is a row, block is a chunk, a block in a row.

Unfortunately, its compatibility really does not bear to spit groove,

There is a gap in the bottom, need vertical-align,

Or there's a gap in the left and font-size:0 Does not apply chrome,letter-spacing: The -2px value is not stable, sometimes it will need -4px.

From sounding back to the groove of float ...

Floating layout is like the first hurt yourself after wounding, a brandished self-palace from the document flow, and then a backhand affect others, and the move awkward.

When floating, we mostly use a fixed width, the width of the design of the response, the fence layout is very inflexible (that is, the percentage), slightly change the size of the font may be the entire layout of the collapse.

Once tried to write the class library when you want to logo+ search box + menu buttons such as three-column layout style class, Oh, finally I gave up the float use absolute to achieve vertical center, found even as Table-cell convenient.

That may be part of the reason why corporate Internet Big Brother, such as Twitter, is still using the table layout.

float and Absolute, on the other hand, are separated from the flow of documents, but Flost can still affect other elements, so float is not completely detached, so float will burn more than absolute when redrawing and returning.

Secondly, due to the effect of floating, many effects will be difficult to produce at the same time, such as vertical center/sub-level, such as high/element sorting, etc...

I do not know is not lucky to come, float is very easy to understand, compatible and good, there is a kind of library after use is more convenient, it is this quick and easy to accept the times.

However, after all, layout is not the essence of its work, even let it become the mainstream of this era, it is still a bit scary to think back.

Perhaps you have not experienced the difference between table layout/positioning layout/Floating layout/fence layout, not knowing the cost and energy of their development and maintenance;

Some people also know that floating this property can not be used, but because there is no better alternative, it is sad to think back.

The developers who want to CSS3 also found this problem, and introduced the Flexbox this layout way, to a great extent, improve the layout function.

It is divided into three stages: box (the oldest, today is not very good)/Flexbox (transition, not widespread)/Flex (latest), and its inline shape (i.e. Inline-box/inline-flex, etc.).

(Before the information is not much to read, has been afraid to write, but recently installed to make a big big boss grabbed conversation, had to gig, but also please dad light spray. ）

The Chinese name of the flex layout is wonderful: Automatic layout/Elastic layout/Telescopic container, the name of the light is already feeling super cock.

It does have the flexibility of the previous layout, and in its domain it is basically possible to completely abandon float and absolute, as they can do (single-finger layout) and flex will definitely do.

And the compatibility is surprisingly good, the basic personal contact with the device is compatible with Flex.

Flex is the property value of display, which is the orthodoxy of the row block layout, which specifies that the element is a telescopic box, and is not more semantic than float.

Just like display other property values, each box pattern has its own special style effect, such as inline loses height, and Tabel-cell has some form characteristics.

Display:flex Telescopic container makes its children become a telescopic project, has a direct horizontal layout, preemption/auto width, automatic height, sortable, reliable qi and other functions,

In this will not repeat the various properties of the style effect, any search can be better than I say, such as I love to read this article.

Again, the downside of Flex:

It's hard to think of the flex layout as a fence layout,

For example, the. flex-row {Dispaly:flex}. flex-row>*{flex-grow:1} can produce a horizontal sub-level congruent width effect, but when the need for a fixed width is worth the time, this is added fle-shrink:0;

When set to flex layout, the, and attributes of the child elements float clear  vertical-align  will be invalidated, which will cause conflicts with other layout/class libraries, which should be considered in advance.

Float is a widely circulated layout, and the fence layout is well suited for rapid structural development,

So I never resisted the use of float, but with our understanding and practice of more layout styles, one day we will choose better, and slowly forget this side room ...

CSS float float is a mix ball