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

  • web服务器访问人数超过上限(服务器web访问日志如何查看)

    web服务器访问人数超过上限(服务器web访问日志如何查看)

  • 荣耀4手环首次充电多久(荣耀手环4使用说明)

    荣耀4手环首次充电多久(荣耀手环4使用说明)

  • 华为lndal00什么型号(华为lldal00价格多少钱)

    华为lndal00什么型号(华为lldal00价格多少钱)

  • 华为桌面布局怎么锁定(华为桌面布局怎么解锁锁定)

    华为桌面布局怎么锁定(华为桌面布局怎么解锁锁定)

  • 苹果se2怎么截屏(se2怎么截屏幕)

    苹果se2怎么截屏(se2怎么截屏幕)

  • 抖音评论区的背景颜色怎么调(抖音评论区的背景墙怎么设置)

    抖音评论区的背景颜色怎么调(抖音评论区的背景墙怎么设置)

  • 为什么pr导出视频找不到文件(为什么pr导出视频没声音)

    为什么pr导出视频找不到文件(为什么pr导出视频没声音)

  • 压缩包文件损坏,解压失败怎么办(压缩包文件损坏或压缩文件格式未知)

    压缩包文件损坏,解压失败怎么办(压缩包文件损坏或压缩文件格式未知)

  • 微信标签别人能看到吗(微信标签别人能删除吗)

    微信标签别人能看到吗(微信标签别人能删除吗)

  • wps字体加粗怎么弄(wps字体加粗在哪里)

    wps字体加粗怎么弄(wps字体加粗在哪里)

  • 华为畅享10发布时间(华为畅享10发布会台词)

    华为畅享10发布时间(华为畅享10发布会台词)

  • 手机屏幕里面有阴影怎么办(手机屏幕里面有印子是怎么回事)

    手机屏幕里面有阴影怎么办(手机屏幕里面有印子是怎么回事)

  • 固态硬盘有几种(西部数据m2固态硬盘有几种)

    固态硬盘有几种(西部数据m2固态硬盘有几种)

  • 抖音1988放映厅什么意思(抖音1988放映厅滤镜)

    抖音1988放映厅什么意思(抖音1988放映厅滤镜)

  • 苹果11蓝牙名字怎么改(怎么设置苹果蓝牙的名字)

    苹果11蓝牙名字怎么改(怎么设置苹果蓝牙的名字)

  • 小米8可以投屏电脑吗(小米8可以投屏在墙上吗)

    小米8可以投屏电脑吗(小米8可以投屏在墙上吗)

  • 已发朋友圈再修改分组(已发朋友圈再修改文案)

    已发朋友圈再修改分组(已发朋友圈再修改文案)

  • 咸鱼如何开通买家保障服务(咸鱼如何开通买家支付)

    咸鱼如何开通买家保障服务(咸鱼如何开通买家支付)

  • 手机屏幕总成带框是什么意思(手机屏幕总成带框好换吗)

    手机屏幕总成带框是什么意思(手机屏幕总成带框好换吗)

  • 抖音猪猪头像怎么拍(抖音猪头像可爱)

    抖音猪猪头像怎么拍(抖音猪头像可爱)

  • 小米6充电功率(小米充电功率在拨号键怎么看)

    小米6充电功率(小米充电功率在拨号键怎么看)

  • 手机有话费打电话提示已停机(手机有话费打电话提示已关机是怎么回事?)

    手机有话费打电话提示已停机(手机有话费打电话提示已关机是怎么回事?)

  • s10呼吸灯设置(s10呼吸灯怎么设置)

    s10呼吸灯设置(s10呼吸灯怎么设置)

  • 在多个网络环境下修改网卡的优先级(网络环境中存在不同网段的nvr)

    在多个网络环境下修改网卡的优先级(网络环境中存在不同网段的nvr)

  • 盘点ChatGPT的使用资源(chatplus)

    盘点ChatGPT的使用资源(chatplus)

  • 对账结算流程
  • 小区业委会是否可以进行经营活动?
  • 注销股本对所有股票影响
  • 台账和明细账的区别
  • 免征增值税项目记忆
  • 增票普票税额是否可以抵扣吗
  • 个体工商户五级税率
  • 支付税盘服务费怎么做账
  • 发生哪些情形的应判定为重大电力安全隐患
  • 有留抵增值税怎么做账
  • 当月确认收入下年怎么算
  • 社保补助扶持给个人的钱是否需要缴纳个人所得税呢?
  • 客户已经抵扣的发票怎么开负数发票给对方
  • 管理咨询公司需要什么条件才能开发票
  • 一般纳税人哪些项目可以简易征收
  • 机票抵扣增值税需要什么凭证
  • 固定资产折旧提足怎么办
  • 抵扣联和发票联算一张发票吗
  • 旅游公司主营业务介绍
  • 城市维护建设税减免税优惠政策
  • 房企的预收账款是什么
  • 公益性捐赠的个税
  • 安装费如何做账
  • 怀特岛郡国旗
  • 宏基笔记本一键恢复系统
  • nclaunch.exe - nclaunch进程有什么用 是什么意思
  • 新公司免税额度是多少
  • 债务担保是什么意思
  • thinkphp query
  • 第4章 数据处理思维导图
  • 应交增值税专栏下的增值税项目有哪些?
  • 公司股东变更要交税吗可以将股东变更吗
  • 企业收到海河工厂发运的乙材料,并验收入库
  • php实现快速排序算法
  • modprobe operation not permitted
  • 旅游业发票的税率是多少
  • js原型函数
  • 小微企业所得额如何计算
  • 公司注销后如何追缴税款
  • phpcms添加内容
  • 收到进项发票怎么入账
  • 小企业如何计提折旧
  • 开发票,对方收取税点,如何计算?
  • 培训学校的主营业务是什么
  • 国家知识产权专利网
  • 收款预缴增值税怎么做账
  • 加盟代理需要什么手续
  • 长期借款短期利息怎么算
  • 发工资摘要没写工资
  • 技能培训费属于哪个科目
  • 工业企业出售产品应交的消费税额,应计入营业成本
  • 出差费计入工资总额吗
  • 已认证专票发现地址为错误
  • 可以从公司公户直接支付给个人的款项有哪些
  • 可以抵扣的增值税进项税额
  • 收款凭证和付款凭证是出纳人员收款、付款的依据
  • mysql主界面
  • win10系统崩溃后可以通过什么来恢复
  • ipad和iPhone的mac地址区别
  • mac系统操作的小技巧
  • win7出现问题
  • 人脉系统
  • 怎么查看自己mac电脑有没有被人使用过
  • mac新版系统
  • Win7旗舰版64位如何关闭电脑触摸屏功能的方法
  • 如何清楚windows搜索记录
  • 在linux中使用什么命令可以执行shell脚本
  • ubuntu操作
  • 修改win10登录界面
  • win7怎么cmd
  • linux应用程序在哪个目录
  • jq获取单选框的值
  • 重装操作系统后无法开机
  • javascript 数字类型
  • android4.4.2升级包
  • unity鼠标移动控制角色旋转
  • js操作对象的方法
  • android遇到的难题,怎么解决的
  • 达州房管局备案查询系统
  • 瑞士州税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设