Hacker News Reader

Comment by FPGAhacker | Hacker News Reader

I would like to take this opportunity to confess that I was baffled by the use of the term float in CSS since inception. I vaguely thought it must have something to do with layers and you would float an image to the top layer.

It only occurred to me recently that float actually meant float from a 2d point of view. As in a side view of an aquarium, you attach float to an object, and it goes to the top of the tank, displacing water along the way. You can float it left, and right, etc... goes to the left and right of the top of the aquarium. Things line up at the top if you float multiples, etc.

I don't know if that is an appropriate analogy or not, but it seems to fit for me.

View on HN

FWIW CSS simply adopted the term from publishing:

> A floating block in writing and publishing is any graphic, text, table, or other representation that is unaligned from the main flow of text. Use of floating blocks to present pictures and tables is a typical feature of academic writing and technical writing, including scientific articles and books. Floating blocks are normally labeled with a caption or title that describes its contents and a number that is used to refer to the figure from the main text.

> […]

> Floating blocks are said to be floating because they are not fixed in position on the page at the place, but rather drift to the side of the page. By placing pictures or other large items on the sides of pages rather than embedding them in the middle of the main flow of text, typesetting is more flexible and interruption to the flow of the narrative is avoided.

Yes, the term was borrowed from typography and is used in most professional DTP software.

> unaligned [...] rather than embedding them in the middle of the main flow of text

I don't understand. The first and simplest use of CSS float that I learned is to embed an image into the text flow, with the text wrapping around it, http://allwebco-templates.com/support/S_textwrap.htm

I always thought that was its original purpose. And it is its effect in its purest form --- when you set the float property and nothing else. (Using it to lay out a page in columns, as the article mentions, usually takes juggling other properties, like margin, width, etc.)

Your aquarium analogy visualized: http://youtu.be/xara4Z1b18I

Thanks for sharing. This is insane.

CSS is probably the language that I’ve been using for a long time without exactly knowing how these things like float exactly work. Instead, I’ve often used a copy and paste or test and browse approach to get layouts I wanted.

I'm quite sure that English is the language that I've been using for the longest time without exactly knowing how it exactly works!

Or metaphorically I don't know exactly how English works when it decomposes so gracefully as it is capable of doing.

Is there any kind of equivalence in programming languages like this? I mean theoretically is it possible to design or possibly write code such that it is capable of imprecision and yet compiling to equivalent instructions?

(I realize I may simply lack the formal language to describe what I mean, but if by virtue of any fortuitous inherent redundancy in my question, a passing expert may recognise their field and be willing to guide me, I shall be most grateful.)

Holy cow. Thanks so much for sharing this!

Wow, that’s actually a cool way to make sense of the quirky things float does to various elements

Thanks for the honest admission! Totally agree. I really feel the fragile mystery of floats and they way they operated is what drove so much adoption for CSS frameworks. It's true today that you can do more complex layout without any type of framework. But understand that for a period it was so much easier to use tested approaches than to battle the edge cases.

> it must have something to do with layers and you would float an image to the top layer

Isn't it? If you float an image it does go to a top layer and blocks other non-float layer below it.

In 2d. The OP was using the term "top layer" in a 3d sense.

Ah, I just realized he's talking about float with inline elements.

I'm thinking of float with block elements, which works in the way OP originally thought.

Rightly or wrongly, I always thought of it as being the (since deprecated) IMG align=left|right attributes' behaviour promoted for use by other elements.

Does float mean what you thought it meant in other contexts? In LaTeX it's basically the same as it is in CSS.

It has his meaning in tiling window managers (where a floating window is in another layer, usually above the others), and probably in window managers in general. I'm curious if there are other examples.

Reply on news.ycombinator.com