←back to thread

A subtle layout bug in Google Search: When CJK text-wrapping meets float

(likang.dev)
80 points kang_li | 4 comments | 19 Nov 24 16:05 UTC | HN request time: 0.869s | source
1. silvestrov ◴[19 Nov 24 16:53 UTC] No.42185525[source]▶
In short: don't use "float: left/right" for anything besides real floating images.

In this case a "display: flex" on the <a> element would be a much better solution.

replies(1): >>42186102 #
2. londons_explore ◴[19 Nov 24 17:39 UTC] No.42186102[source]▶
I wonder how long ago this CSS was written...

That particular UI element of google search has been around decades, so might predate css flex...

replies(1): >>42186196 #
3. ipaddr ◴[19 Nov 24 17:47 UTC] No.42186196[source]▶
2009 but css flex didn't become popular until 2014+.
replies(1): >>42186669 #
4. mananaysiempre ◴[19 Nov 24 18:32 UTC] No.42186669{3}[source]▶
In 2009, one still needed to give IE6 serious thought (even if, depending on the use case, the conclusion could already be “nope”). At the time, I had someone telling me that we shouldn’t waste our time on supporting mobile. And flexbox was more a curiosity you studied with a hope of using someday than a serious option.

And clearing your floats was part of the absolute basics. Of course, we still forgot to now and then.