Difference between ".row" and ".clearfix" Class
As we all know Bootstrap has become very popular day by day as a web responsive framework, which is used to make responsive web applications for several devices. In this post we will talk about the very most and commonly used CSS classes which are .row and .clearfix. Both the CSS classes are similar to each other in behaviour. These CSS classes are used to clear the floating of elements before and after the element on which it is applied to. Bootstrap columns have floating property, whenever a column is created it's default floating property is set to left. That's why if we create any other element after of before the floating element so it is required to clear the floating before and after of the the floating element otherwise the before and after element of the floating element will overlapped to each other. These are the default bootstrap CSS classes defined in Bootstrap's css library to make use of it to clear the floating.
There is only the difference between the .row and the .clearfix is the margin property. The .row class has the margin-left property as -15px and margin-right property as -15px which is not in .clearfix, .row is basically used with .container class because the .container class has default padding-left and padding-right property which is 15px, and if we create columns which also have padding-left and padding-right property which is 15px, inside the .container so the content of the column will be shifted to 30px towards right which is the sum of 15px padding of .container and 15px padding of .col-* classes, .row minus the 15px of padding of .container by it's margin property and make the content aligned to other.