Hard time understanding Float

Some elements float well in the same line when it's only one of the elements that are floated because the element that isn't floated is giving definition to the container. This leads into your 2nd question about why the element collapsed when both elements were floated. You are right that it has to do with Float taking the element out of the flow of the page. In this case, when the 2 elements were all that existed within the container and both were Floated, then there was nothing inside the container, which caused it to collapse, which in turn caused the floated elements to overflow.

I'm not sure exactly why he used display: table rather than display: block. I've never used display: table, but when I looked it up, it seems as though it acts very similarly to inline-block, where it doesn't take up the entire line, but it puts it in its own block, similar to block. He may have been able to use display: block, but my guess is that it would have extended further than he wanted it to, so he used display: table to limit the amount of the element that it used.

The after pseudo element is being applied to the .group class, which he applied to all the <article> elements. The clear property specifies what should happen with the element that is next to a floating element, so when he used clear: both, it told the browser to push the element down below both left and right floated elements. This basically just gave the element something inside of it (from the content property), and told it to push that content down below the floated elements, which meant that they wouldn't overflow because the element wouldn't collapse.