<!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脱离文档流了吗？请大佬赐教。
奋斗好青年