The problem of using floats and text overflows when nesting block-level elements?

problem 1: adding css, to the following html code only adds the left floating attribute in the class selector categoryMenu and productsAsideCategorys, but the containing block of these two selectors does not set a float, but the result is the same as the containing block. It is mentioned in the css authoritative guide that "floating elements are limited by the location of their containing blocks", and the end result should be the same as when no floats were added.
question 2: why do the text overlap after adding a class selector.
question 3: there are often a lot of unexpected phenomena when using css. The use of floating and positioning of nested boxes in books will have no effect. I did not say in detail that css books or blogs are recommended by God.

   

Css
Mar.02,2021
Menu