4 ms·
> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this
by cantSpellSober 3y ago
> Floats can be used to position boxes to the left and right edges of their container box
No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS.
`float` is more of a typographic tool. If this article calls itself pedantic, it needs more pedantry.
- danielvaughn 3y agoAny introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.
- yojo 3y agoIt is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.” CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.
- tdudhhu 3y agoFloat is still relevant. For example if you have some text that must flow around an image that is placed in a corner.
- blowski 3y agoI think the parent comment agrees with you. It’s the use of float to, for example, position menus on the page which is no longer relevant.
- treflop 3y agoOld HTML/CSS might be out of scope for a modern web app but I’m pretty sure if you were to write a layout engine from scratch today, it wouldn’t look any different from modern HTML/CSS Honestly layouting an app in code just looks like HTML/CSS but with functions.
- unclebucknasty 3y agoModern devs should hand-write as much CSS as they do Assembly code.
- golergka 3y agoYes, people are very happy with CSS and never tried replacing with anything. /s
- cxr 3y ago> It was basically created to be like a Microsoft Word but for files on another person's computer Or like WriteNow, even.
- velcrovan 3y agoI'm not sure how I’d position, say, sidenotes/marginal notes without using floats. Particularly when the note must align with a reference in the middle of a paragraph.
- tdudhhu 3y agoAll elements in a container floats to the top of the container and right or left (depending on the text direction ltr or rtl) of the previous element. If there is no space left it will move below the previous elements. If an element has `display: block`, it will fill up all horizontal space so every element after it will float below that element. That is why it is called `float`. It's how the position of elements is calculated. If you use `float:left|right` it forces the float of that element to float left or right before all other elements in the same container. That is what float means. But of course this does not work anymore if your container uses flex or grid.
- ourmandave 3y agoYou can still float elements in a subcontainer inside a flex container.
- lovegrenoble 3y agoAnd for flexbox layout, this tool streamlines the process, removing the need to worry about numerous properties: https://flexboxcss.com https://flexboxcss.com
- LegionMammal978 3y agoA large portion of Chapter 1 (https://book.mixu.net/css/1-positioning.html#float-positioning-scheme https://book.mixu.net/css/1-positioning.html#float-positioni...) is dedicated to the intricacies of floats and their special flow, explaining how their behavior can be carefully reused and adapted for alternative purposes. I'd say that's as pedantic as anything can be, especially given the lack of flexbox/grid layout when it was written.
- deleted 3y ago[deleted]