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

  • 离职员工奖金发放规定
  • 外购配套费为什么不计利润
  • 小微企业企业所得税税率变化
  • 没有认证的发票怎么做分录
  • 小规模纳税人的增值税账务处理
  • 金融企业逾期贷款税前扣除
  • 提供有形动产租赁服务适用税率为13%
  • 手工帐怎么登记
  • 进项发票认证后暂不抵扣
  • 贷款金融资产减值的会计分录怎么写?
  • 公司股东投资是负债吗
  • 红字抵扣怎么开
  • 研发场地租赁计什么科目
  • 工会经费计入应付职工薪酬
  • 印花税计入应交税费需要调整吗
  • 企业所得税国税还是地税征管
  • 案例分析工程发票进项高于销项怎么抵扣?
  • 公司车辆可以一年一检吗
  • 员工个人所得税申报方式选哪个
  • 职工教育经费列支范围及标准
  • 贸易公司购入商品会计分录
  • 一般纳税人增值税及附加税费申报表怎么填
  • 哪些人需缴纳个人所得税
  • 公司营业收入证明怎么开
  • 多次出库的商品最后一起结账的分录怎么写?
  • mac终端怎么运行命令
  • 专用发票和普通发票的报销区别
  • 七喜v8笔记本
  • 银行代扣的年费怎么退
  • 分公司收到总公司拨款怎么做分录
  • 公司的对公账户
  • 境外佣金支付所需要征收的税
  • 车辆违章罚款的钱上交到那了
  • php函数写法
  • 安装多版本chrome
  • 装修阶段监理注意事项
  • dhclient卡住
  • php禁用函数怎么删除
  • 删除组合命令
  • python的series
  • 帝国cms使用手册
  • 资产负债表中的货币资金怎么算
  • 房地产开发公司组织架构
  • mysql有几种
  • 关联方利息支出税前扣除规定
  • 网上更正增值税申报表
  • 房屋租赁需要计提印花税吗
  • 公司个人所得税申报操作流程
  • access 模糊匹配
  • 会计人员未参加继续教育
  • 劳务公司给包工头转账交税吗
  • 营改增的不利影响
  • 贷款减值准备如何计算
  • 净利润为负数还计提盈余公积吗
  • 直接计入管理费用的税金有哪些
  • 装饰公司收到的礼品
  • 固定资产确认条件最新
  • 药品进销差价科目明细
  • 私企需要计提盈余公积吗
  • 商业零售企业商品进销差价
  • SQL2005、SQL2008允许远程连接的配置说明(附配置图)
  • mysql数据库里面有一个表查的特别慢
  • 数据库查询排名
  • win7电脑连不上wifi怎么解决
  • win8系统怎么取消屏保
  • win 8怎么样
  • keyemain.exe是什么
  • win8全屏快捷键
  • linux系统的服务器,重启之后运算速度变慢
  • win10无internet怎么办
  • WIN7系统还原
  • Python中利用不同Excel表的列匹配
  • shell函数参数
  • android保存文件到本地
  • 星球大战与高达的关系
  • js数组添加元素的方法
  • js 编程
  • 如何知道公司所有账户
  • 国税局内设机构
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设