Imagine the topic is li wrapped in a tag~

Because if it is as the questioner said

I think the display of li should be set to inline, and the display of a should be set to block

So you actually use flow elements to wrap block-level elements, but in fact, flow elements cannot wrap block-level elements. . In strict mode, it is not allowed ~ but in permissive mode, different browsers will have different forms of expression. Therefore, it is recommended to use block-level packaging for details. You can write one yourself to try, and then use the developer Use the tool to take a look at the dom structure~

If there is anything wrong, please correct me. Thank you.

It will be clear once you understand the relationship between these three
inline is within a line
inline-block is an inline block
block is a block

It depends on the situation. If you don’t need the features ofinline, just block

W3C original text:

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements)

1. display:inline-block; so that the inline box does not wrap a block box. This method can get rid of many side effects caused by float. For details, you can read this article "Goodbye, floating layout-based on display: inline-block list layout》

2. float so that it is not in the document flow.

It is recommended to use float layout.
Clear the float again.
Clear floating code.

.clear:after{ content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .clear{ zoom: 1; }