HTML5 Example
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;
}
Ulysses
Soaring through the galaxies
Dallas
Rollin' down to Dallas
McKay
McKay and his best friend
Thunder
Thundercats on the move
代码中为什么会用到这个：
section::after{
content:"";
display:table;
clear:both;
}
来给section清除浮动？难道section脱离文档流了吗？请大佬赐教。 |
天盟APP下载
