<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0;padding:0
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0;padding:0;} .box{border:1px solid #23D127;width:520px;margin:100px auto;} .box .pageBtn{width:80px;height:40px;border:1px solid #0747C8;text-align:center;font:bold 14px/40px "宋体";color:#0747C8;} .box .lastBtn{float:left;} .box .nextBtn{float:right;} .box:after{content:"";clear:both;display:block;}</style></head><body><div class="box"> <div class="pageBtn lastBtn">上一页</div> <div class="pageBtn nextBtn">下一页</div></div></body></html>
给浮动元素的父集 加:after
//after和content是结合使用的缺一不可,意思是在.box的子元素最后面添加一个content内容,并且设置display为block(目的是想占width为100%),清除float左右浮动。