<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">

body {
 background:#FFF;
 margin:50px;
 font-family:sans-serif;
}
section{
 width:500px;
}
article{
 box-sizing:border-box;
 width:250px;
 height:250px;
 padding:20px;
 text-align:center;
 float:left;
 border-bottom:1px solid rgba(0,0,0,.2);
 border-right:1px solid rgba(0,0,0,.2);
}
article img{
 width:50%;
}
section{
 border-top:1px solid rgba(0,0,0,.2);
 border-left:1px solid rgba(0,0,0,.2);
}
section::after{
  content:"";
  display:table;
  clear:both;
}
article h1{
 font-size:32px;
 margin:10px 0;
 color:#666;
}
article p{
 font-size:15px;
 margin-bottom:0 0 10px;
 color:#999;
}

</style>
</head>

<body>
<section>
  <article>
    <h1>Ulysses</h1>
    <p>Soaring through the galaxies</p>
    <img src="pic1.png" alt="image of Ulysses">
  </article>
  <article>
    <h1>Dallas</h1>
    <p>Rollin' down to Dallas</p>
    <img src="pic2.png" alt="image of Dallas">
  </article>
  <article>
    <h1>McKay</h1>
    <p>McKay and his best friend</p>
    <img src="pic3.png" alt="image of McKay">
  </article>
  <article>
    <h1>Thunder</h1>
    <p>Thundercats on the move</p>
    <img src="pic4.png" alt="image of Thunder">
  </article>
</section>
</body>
</html>

代码中为什么会用到这个：

section::after{
  content:"";
  display:table;
  clear:both;
}

来给section清除浮动？难道section脱离文档流了吗？请大佬赐教。