清除浮动类的问题

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

慕少8052535

浏览 1024回答 1

1回答

奋斗好青年

用伪类给section清除浮动这种方法挺常用的,兼容性好,因为你的父元素section没有添加高度,而你的里面的article用了浮动,所以导致section的高度缺失,所以就要用到清除浮动..如果问题解决了,请记得采纳!

0 0

随时随地看视频慕课网APP