{"id":3149,"date":"2020-02-24T13:18:34","date_gmt":"2020-02-24T13:18:34","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3149"},"modified":"2023-03-02T10:12:55","modified_gmt":"2023-03-02T10:12:55","slug":"css-tutorial-is-css-float-deprecated","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-is-css-float-deprecated\/","title":{"rendered":"CSS Tutorial – Is CSS float deprecated?"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– An interesting conversation came up at work the other day: Should we use the CSS\u00a0float<\/code>\u00a0property now that we have CSS Grid and Flexbox?<\/p>\n

<\/a>The short answer<\/h2>\n

No! Well, mostly. I\u2019d only use it today for wrapping text around images, though and I\u2019d avoid using\u00a0float<\/code>\u00a0entirely for layouts.<\/p>\n

<\/a>The longer, more annoying answer<\/h2>\n

Before flexbox and grid, we had to use the CSS\u00a0float<\/code>\u00a0property to make grids and layouts. In fact, it was the first thing I learned about web design. On one hot summer afternoon I cracked open a copy of\u00a0Designing with Web Standards<\/em>\u00a0by Jeffrey Zeldman and then moved a tiny red div with\u00a0float: right<\/code>. It was magic. There was\u00a0power<\/em>\u00a0in the\u00a0float<\/code>.<\/p>\n

It was so easy to move something around on the screen that I now wonder how many designers fell in love with the web simply because of how easy it is to use move things around like that.<\/p>\n

But using\u00a0float<\/code>\u00a0to build complex layouts was\u00a0always a hack<\/a>: it was only really designed to let text wrap around an image.<\/p>\n

img {\r\n  width: 150px;\r\n  float: left;\r\n}<\/pre>\n