位置: IT常识 - 正文

【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )(css教程网站)

编辑:rootadmin
【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 ) 文章目录一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 )二、清除浮动代码示例一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 )

推荐整理分享【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )(css教程网站),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css培训课程,css教程网站,css在线教程,css培训课程,css教程网站,css是什么课程,css教程网站,css培训课程,内容如对您有帮助,希望把文章链接给更多的朋友!

如果盒子没有设置高度 , 并且盒子中还设置了浮动 , 如上一篇博客 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 ) 中绘制的如下模块 :

在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ;

在列表中每个列表项都设置了 浮动 ;

/* 网格商品展示 */.box-bd {/* 处理列表间隙导致意外换行问题 一排有 5 个 228x270 的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/width: 1215px;}/* 网格中 ul 列表中每个列表项样式 */.box-bd li {/* 设置左浮动 让列表项在一行中从左到右排列 */float: left;/* 设置尺寸 228 x 270 */width: 228px;height: 270px;/* 设置右边距和下边距 */margin-right: 15px;margin-bottom: 15px;/* 设置背景颜色 - 白色 */background-color: #fff;/* 设置盒子模型的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);}

之前的盒子都设置了高度 , 因此其中虽然设置了浮动 , 但不会影响到后续的页面布局 ;

【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )(css教程网站)

上述模型中 , 没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ;

参考

【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

博客清除浮动 ;

使用

/* 清除浮动 - 使用双伪元素清除浮动 */.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

清除浮动 ;

清除浮动时 , 给要清除浮动的 父容器 , 设置 clearfix 样式 ;

二、清除浮动代码示例

首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ;

/* 清除浮动 - 使用双伪元素清除浮动 */.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

然后 , 在 HTML 标签结构中 , <ul> 标签的上一层父容器中 , 设置清除浮动 ;

<!-- 网格商品展示模块 - 开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 没有设置高度 内部有浮动 必须清除浮动 --><div class="box-bd clearfix"><ul><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1200人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li></ul></div></div><!-- 网格商品展示模块 - 结束 -->
本文链接地址:https://www.jiuchutong.com/zhishi/299895.html 转载请保留说明!

上一篇:2023年顶级编程语言趋势(编程前十名)

下一篇:React18升级和React18新特性(react 16.8 新特性)

  • 环境保护税的应税污染物有哪些
  • 员工公交费补贴怎么入账
  • 发票开具就能做账了吗
  • 增值税发票丢失可以用复印件入账么
  • 什么叫欠账
  • 营业执照类型有限责任公司
  • 企业增资的分录怎么写
  • 支付临时工劳务费700元需要开发票吗
  • 软件企业收到先征后返的增值税税款是否要缴纳企业所得税
  • 会计分录怎么确认借贷方向
  • 逾期认证未抵扣的文件
  • 收的标书收入增值税多少
  • 开票信息里面的电话号码怎么来的?
  • 税控盘产生的费用可以抵扣吗
  • 公司为员工承担的个税可以税前扣除吗
  • 商品流通企业批发销售会计分录
  • 稽查查补是什么意思
  • 无票收入报税后,后期又开票出去怎么处理?
  • 物业公司物业费都交什么税
  • 印花税的计税依据是销项和进项的金额
  • 事业单位的费用
  • 股份制企业是什么
  • 企业所得税调增调减项目比例
  • 退税有啥影响
  • 苹果电脑连接打印机打印不出来
  • session失效的方法
  • 装修费预付款会计分录
  • Win11 Build 22000.348更新补丁KB5007262预览版发布(附更新修复内容汇总)
  • PHP:imagerectangle()的用法_GD库图像处理函数
  • 现金溢余基本账务处理
  • 废旧物资回收企业所得税优惠政策
  • 筹建期间的费用计入长期待摊费用吗
  • 房产税和土地使用税什么时候申报
  • 同一控制下企业合并入账价值
  • php如何使用
  • 公允价值变动损益在利润表哪里
  • 淘宝前端用什么写的
  • thinkphp删除文件
  • 工会经费是按应发工资还是实发工资申报
  • 小程序制作平台
  • 危废处理账务处理
  • vue动态绑定背景图
  • 生育津贴的钱怎么取出来
  • day02-HTML02
  • 没进项票
  • 水电费是收据能入账不
  • 国内源码平台
  • 用友t3资产负债表怎么生成季报
  • sql乘函数
  • 付款人和开票人必须相符吗
  • 银行转账凭证可以保留多久
  • 以银行存款支付固定资产修理费
  • 经营性租赁账务处理方法
  • 金融资产减值损失
  • 资产负债表中的固定资产是原值还是净值
  • 现金流量结构分析表
  • 分配间接成本的计算公式
  • 股东增资有哪几种方法
  • MySQL存储过程与触发器
  • win2000注册表
  • 主板升级bios失败怎么办
  • win7密码输入错误被锁住
  • linux怎么用shell
  • win7如何设置语言输入
  • lnmp一键安装包 linux
  • windows修复失败
  • windows8.1控制面板
  • 电脑预装软件是什么意思
  • 2015.6.28开始写博客记录cocos2dx学习历程
  • opengl入门视频教程
  • IE6,IE7和firefox对DIV的支持区别
  • shell脚本实现ssh登录
  • python爬取某人所有朋友圈
  • bat实现的模仿黑客帝国里面的数码雨
  • 开发 工具
  • js 输入
  • python读取大txt文件
  • 税控盘异常什么原因
  • 小规模纳税人改成一般纳税人怎么改
  • 税控盘换新会影响旧盘数据吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设