What does this 5 lines of code do?

I am trying to learn CSS and occasionally in coming across coding samples, I stumble upon code I haven’t learned in depth before. So I am basically confused by this code and google did not give me enough info.

.row:after {
  content: "";
  display: table;
  clear: both;

I think I know what .row:after means. It means that any element with the class .row will always have the following content after the element with the class .row.

What I am having trouble with is what exactly does

content: "";


display: table;



do exactly?

I would do some research. If I google “css after”, I get led here. (MDN is a great resource by the way.) The first paragraph there explains what the “content” is.

A good developer is a good engineer. And a good engineer is someone that enjoys taking things apart and seeing how they work. Why not mess around with these things and see what they do? Just start with at content attribute, put a value in there, and see what it does. They give some examples - why not copy them into an editor and mess with them?

The display and clear attribute work are just CSS attributes you can google and should work the same for pseudo-elements.

In addition to MDN, I find css-tricks to be a useful site.

Elements after a floating element will flow around it. Use the “clearfix” hack to fix it.
Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your row class element holding floated elements. This element won’t exist in your DOM literally but will do the job.
search clearfix on any preferred search engine you will find detailed explanations.
Please refer this stackoverflow link to get better understanding:

Just as an aside.

Although knowing about how float works isn’t a bad idea, I also wouldn’t worry too much about it. Using float to do layout is an outdated approach. If you learn flexbox and grid you do not need to use float and will avoid all the pitfalls of using it. Whenever possible, the parent container should be responsible for laying out its children.

I’d suggest using float primarily for its intended purpose, which is floating text around an element.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.