侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

解决设置float样式后父级元素不适应问题

2024-04-28 星期日 / 0 评论 / 0 点赞 / 32 阅读 / 1023 字

<!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左右浮动。

 

广告 广告

评论区