利用::after和before来清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用::after和before来清除浮动</title> <style> #box::after,#box::before{ content:""; height:0; visibility:hidden; display:block; clear:both; } h1{ width:300px; height:300px; background-color:#ccc; float:left; } p{ width:300px; height:300px; background-color:#f1f1f1; } </style> </head> <body> <div id="box"> <h1>使用clear清除浮动问题</h1> </div> <p>我是p标签</p> </body> </html>
利用::after或::before玩弄Css计数器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style:none; /* 初始化CSS计数器 并指定一个名称 我这里指定为count */ counter-reset:count; } ul>li{ /* 让 计数器每次自增 */ counter-increment:count; } ul>li::before{ /* 在页面输出 */ content:counter(count); padding-right:20px; } </style> </head> <body> <ul> <li>li_1</li> <li>li_2</li> <li>li_3</li> <li>li_4</li> <li>li_5</li> <li>li_6</li> </ul> </body> </html>
页面输出效果
1 li_1
2 li_2
3 li_3
4 li_4
5 li_5
6 li_6