<!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 关注
- 1023 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消