flex-basis means “ideal” size in certain settings, it by default acts as max-width but depending on value of flex-grow and flex-shrink can act differently as well
Yes, if it’s a width value then it’s a shorthand for flex-basis
This is exactly what it practically means. Document flow repeats the flow of the text, usually from left to right from top to bottom and all elements are placed according to this one-dimensional flow. If you want to stack elements on top of the flow (on beneath it) you need to take the element out of the flow.
If you take out of the flow more than one element and float them apart they still can overlap as “flow” rules stop applying once something out of flow. Clearfix introduces “flow” rules to out-of-flow floated elements.
*No one uses floats since CSS4 (> 5 years)
vertical-align is used on the inline element itself, in contrast to align-text that is used on the child element and it aligns element vertically within it’s line height. So if you set inline child’s line height to container’s height and do vertical-align: middle you’re vertically aligning child in relation to it’s parent container (something that was hard to do pre-CSS4 times)
*Same note applies
Overflow does what it says: hides anything inside the element that overflows its borders. When child element is out of flow it no longer respects parent dimensional constraints and can easily move outside parent borders. Parent has ability to hide from view anything that does it
These two work in the same way as any value of overflow other than visible would fix the issue. Block elements without height must respect the height of content. Think of “respect” here as lazy algorithm and it goes something like this: “Ok I need to respect the text and there is no way I can avoid this, but I also have a float here and user allows me to overflow it, so fuck that!” - it’s literally what all lazy algorithms think. If you don’t allow to overflow, element must take floats into account, so as I said any value other than visible would work here. Now why, there’s no scroll? Because there is no fixed height of the parent - try to add one and you will see scroll. If element has no height then it presumes that it’s height is a height of it’s contents.
Answering the second one. Now you see that “lazy” element would like to avoid calculating floats if you allow that. Clearfix comes to play when there are only floats in the container element and therefore height collapses to 0 - as it doesn’t have any in-flow elements inside it has to respect. So to fix it you need to add one such element of display: block (or table as in your example) as pseudo ::after element and place it beneath floats by clearing space in both directions