<!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>代碼中為什么會(huì)用到這個(gè)：section::after{? content:"";? display:table;? clear:both;}來(lái)給section清除浮動(dòng)？難道section脫離文檔流了嗎？請(qǐng)大佬賜教。
1 回答
已采納
奮斗好青年
TA貢獻(xiàn)69條經(jīng)驗(yàn) 獲得超30個(gè)贊
用偽類給section清除浮動(dòng)這種方法挺常用的,兼容性好,因?yàn)槟愕母冈豷ection沒(méi)有添加高度,而你的里面的article用了浮動(dòng),所以導(dǎo)致section的高度缺失,所以就要用到清除浮動(dòng)..
如果問(wèn)題解決了,請(qǐng)記得采納!
添加回答
舉報(bào)
0/150
提交
取消