Why do my list item bullets overlap floating elements

The root of the issue (and its fixes)

The bullets lie within a marker box. This box sits outside the content box and cares less about floats. Our floating elements play with the content of neighbouring block-level elements but never the marker box. Thus, our bullets remain crisp, overlapping with any floated element in proximity.

To fix, consider ul { overflow: hidden; }. By spawning a new block formatting context, it guides the whole list and its markers to stay clear of the floated element.

The li { list-style-position: inside; } pulls the bullets inside. This move dodges overlap, but be wary; wrapped lines might shake up your alignment. A word of caution, handle with care!

An interesting alternative is display: table;. With this, your content isn't hidden beside floated elements. Plus, it doesn’t meddle with the flow, unlike a float.

For the beloved Internet Explorer 6 users, try ul { zoom: 1; } in a befitting conditional comment. It fixes layout awkwardness stemming from IE6's reluctance to create a new block formatting context without hasLayout being triggered.

A toolkit for common issues

Spawning a block formatting context

Creating a new block formatting context is as simple as ul { overflow: hidden; }. It's cleaner than disrupting the document’s flow.

Floating but practical

Yes, floating the ul can save the day. But before you go that road, remember it isn't always practical to float every list.

Class clearance

Prefer to apply display: table; on a case-by-case basis? Consider class-based targeting. It saves others from the unnecessary display: table; application.

Keep it relative

Avoid stretching li items too much. The fix? Set li { position: relative; } and tweak left property to nudge items away from floated elements.

Silver bullets for getting tricky overlaps in line

Mastering float control

Don't ignore clear properties. They are your loyal vassals for managing the flow of elements around floats.

Box sizing meta

Keep box-sizing in your mind. If it's set to border-box, added padding won’t bloat your li.

Specificity matters

Use multiple classes or even ID selectors for finessing the styling of tricky lists. Specificity helps you steer clear of undesirable side effects.

Deep diving into standards

For an uncompromisable solution, refer to W3C’s block formatting context recommendations. Knowledge is the ultimate power tool!