<!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脫離文檔流了嗎？請大佬賜教。
1 回答
已采納
奮斗好青年
TA貢獻69條經驗 獲得超30個贊
用偽類給section清除浮動這種方法挺常用的,兼容性好,因為你的父元素section沒有添加高度,而你的里面的article用了浮動,所以導致section的高度缺失,所以就要用到清除浮動..
如果問題解決了,請記得采納!
- 1 回答
- 0 關注
- 1066 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消