Learn about clearing floating. clearfix during Bootstrap

  node.js, question
<div class="row">
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
 <!  -- Add the extra clearfix for only the required viewport -->
 <div class="clearfix visible-xs-block"></div>
 
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 </div>

This code is viewed on chrome with developer tools.<div class="clearfix visible-xs-block"></div>When I found out the width and height of this piece, why? Shouldn’t this piece be 0 in width and height?

clipboard.png

Visible-xs-block determines that when the window size is less than 768px, div changes from none to block.

Clearfix adds a “”space to div, which is equivalent to one character, and determines the height to be 20px according to font-size and line-height.

In addition, even if there are no characters, the width of a block will not be 0 unless it is set.