位置: 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 新特性)

  • 网店推广如何吸引更多流量有用的技巧(网店推广的办法)

    网店推广如何吸引更多流量有用的技巧(网店推广的办法)

  • homepod重新连接wifi(homepod 重新联网)

    homepod重新连接wifi(homepod 重新联网)

  • 饿了么骑手怎么加入的(饿了么骑手怎么加入全职)

    饿了么骑手怎么加入的(饿了么骑手怎么加入全职)

  • 微信消息发不出去有感叹号(微信消息发不出去怎么回事)

    微信消息发不出去有感叹号(微信消息发不出去怎么回事)

  • 苹果手机怎么压缩文件,然后发给别人(苹果手机怎么压缩视频发给别人)

    苹果手机怎么压缩文件,然后发给别人(苹果手机怎么压缩视频发给别人)

  • 苹果手机后置摄像头和手电筒打不开(苹果手机后置摄像头模糊不清是怎么回事)

    苹果手机后置摄像头和手电筒打不开(苹果手机后置摄像头模糊不清是怎么回事)

  • 目录后面的数字怎么变(目录后面的数字怎么修改)

    目录后面的数字怎么变(目录后面的数字怎么修改)

  • 跟siri说打开旁白会怎样(siri打开旁边关闭网络后果)

    跟siri说打开旁白会怎样(siri打开旁边关闭网络后果)

  • 闲鱼可以拒收吗(闲鱼如何收款)

    闲鱼可以拒收吗(闲鱼如何收款)

  • 换sim卡要钱吗(营业厅换sim卡要钱吗)

    换sim卡要钱吗(营业厅换sim卡要钱吗)

  • 华为mate30不贴膜行吗(华为mate30不贴膜屏幕容易花吗)

    华为mate30不贴膜行吗(华为mate30不贴膜屏幕容易花吗)

  • 格式化存储盘是什么意思(格式化储存卡是什么意思)

    格式化存储盘是什么意思(格式化储存卡是什么意思)

  • 有qq号怎么加别人微信(qq号怎么加别人)

    有qq号怎么加别人微信(qq号怎么加别人)

  • 怎么把微信好友隐藏(怎么把微信好友隐藏别人看不见)

    怎么把微信好友隐藏(怎么把微信好友隐藏别人看不见)

  • 手机的飞行模式是什么意思(手机的飞行模式在哪里找)

    手机的飞行模式是什么意思(手机的飞行模式在哪里找)

  • 手机屏幕有横纹怎么办(手机屏幕有横纹和竖纹)

    手机屏幕有横纹怎么办(手机屏幕有横纹和竖纹)

  • AirPodsPro怎么连接Mac(airpodspro怎么连接windows电脑)

    AirPodsPro怎么连接Mac(airpodspro怎么连接windows电脑)

  • 快手打不开闪退怎么回事(快手打不开闪退问题)

    快手打不开闪退怎么回事(快手打不开闪退问题)

  • 天猫所有榜单在哪里看(天猫榜单在哪看)

    天猫所有榜单在哪里看(天猫榜单在哪看)

  • 手机通话时自动挂断是怎么回事(手机通话自动关机什么原因)

    手机通话时自动挂断是怎么回事(手机通话自动关机什么原因)

  • 陌陌怎么开直播(陌陌怎么开直播唱歌)

    陌陌怎么开直播(陌陌怎么开直播唱歌)

  • 怎么检查电脑硬件故障问题?(怎么检查电脑硬件是否正常)

    怎么检查电脑硬件故障问题?(怎么检查电脑硬件是否正常)

  • Windows11去掉桌面快捷方式箭头 Windows11怎么去掉快捷方式箭头(win11永久关闭桌面弹出广告)

    Windows11去掉桌面快捷方式箭头 Windows11怎么去掉快捷方式箭头(win11永久关闭桌面弹出广告)

  • 可以出口的商品
  • 无需外汇局审批的账户
  • 怎么增加资产减少负债
  • 总公司签合同发票由分公司开可以吗
  • 什么情况下视同销售
  • 组织机构代码是营业执照哪几位数字
  • 处理企业的财产有哪些
  • 长期挂账应收账款怎么调
  • 预收账款开票怎么做账
  • 公司研发阶段的产品领料怎么处理?
  • 企业外购固定资产的成本包括购买价款和相关税费
  • 质量问题用实物形容
  • 打印机需要计提折旧吗
  • 一个订单只能申请一次退款吗
  • 营改增后企业所得税
  • 调用核心征管失败是什么意思
  • 承兑到期不兑付应起诉哪方?
  • 红字增值税发票含税吗
  • 非现金资产包括
  • 办公室装修计入什么科目里
  • windows11怎么设置壁纸
  • 减少子公司合并的风险
  • 电脑bios启动项设置
  • 现金流量表怎么编制
  • 水利基金减免了还用计提吗
  • linux小技巧
  • 上月发票这月冲红,对这月有影响吗
  • 企业会计的日常行为准则
  • 处置二手固定资产
  • 继续涉入资产后续计量
  • 已冲销凭证是否可以作废
  • 提坏账准备的会计分录 2022
  • 学摄影要交学费吗
  • 小规模纳税人的增值税账务处理
  • javascript数据类型
  • 2021前端热门技术解读
  • 投资收益的会计处理
  • 送货运输费用税率
  • 什么经营范围可以开门票发票
  • java删除类
  • 企业有什么税收
  • 侵权赔偿补偿金如何计算
  • 预付卡业务开票怎么开
  • 印花税申报怎么填
  • 财务报表审计的基础是独立性和专业性
  • 支付运费的会计怎么记录运输费
  • 小规模出售固定资产账务处理
  • 调整以前年度费用如何做分录
  • 关联方往来款账务处理
  • 宣传费怎么做账
  • 在记账过程中,可能发生各种各样的差错
  • 现金日记账年结怎么划线
  • 汽车三产件
  • 单位租个人房子租房合同
  • 企业支付宝能买东西吗
  • 生产型企业加计扣除10%
  • 金融企业借款费用计入
  • 电脑windows怎么查
  • win2008 r2 hosts文件修改方法
  • gitlab linux
  • 笔怎么画最好看
  • 使用筷子就餐会不会传染乙肝病毒
  • Win10 Mobile 10572 预览版已修复和已知问题汇总
  • linux 文件管理命令
  • win10打开或关闭功能在哪里
  • 快速查看浏览的英语短语
  • centos vi命令
  • wind微博
  • 网站出现问题怎么办
  • win7 u盘不显示
  • win8系统怎样
  • linux bash shell
  • jsp中onload事件
  • jquery序列化json
  • NGUI之UIRoot
  • js事件循环过程
  • 怎样从增值税发票查询
  • 湖北省税务申报流程 个体户
  • 债务核销条件
  • 不予处罚不予立案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设