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

  • 小规模免缴增值税吗
  • 纳税义务发生时间和申报纳税的时间
  • 捐赠劳务支出可在企业所得税前扣除吗
  • 印花税核定征收管理办法
  • 所得税申报表中的资产总额如何填
  • 铁路大票抵扣几个点
  • 进口环节应纳消费税的组成计税价格
  • 代开的专用发票如何开具红字发票
  • 个税申报包含哪些
  • 应收票据周转率多少合适
  • 无形资产研究阶段的支出全部费用化
  • 加工成本属于什么会计科目
  • 事业单位库存现金
  • 财政授权支付凭证后多久打款
  • 银行缴纳印花税的范围
  • 审计费用需要计什么科目
  • 公司冲账发票做账流程
  • 增值税专用发票电子版
  • 小规模企业税务简易注销
  • 补缴纳以前年度企业所得税税率如何论定
  • 个人独资企业生活费用扣除
  • 100%控股有什么风险
  • 收到的增值税专用发票如何认证
  • rtx3090 rtx titan
  • 为什么u盘里的文件无法删除
  • 电脑默认网关不可以用
  • 分公司开业开场白
  • 小规模纳税人免税政策2023年
  • 小规模纳税人报税期是哪几个月
  • 图片php格式怎么换成jpg
  • 销售金额环比
  • 建设工程项目设计质量控制的内容
  • 微信小程序实训内容
  • 修改Laravel5.3中的路由文件与路径
  • 重复上次命令
  • 往来款的账务处理
  • 买汽车配件属于什么服务
  • 周转材料包装箱属于存货分类的
  • mysql备份原理
  • 土地出让金抵扣进项税
  • 变更税务法人需提供银行流水吗
  • 什么是一般增值税纳税人
  • 用友t3怎么结转本年利润
  • 小型生产加工企业税率
  • sql2000错误9003
  • 以前年度损益调整
  • 缴纳车辆购置税有发票吗
  • 购买固定资产用什么凭证
  • 工会会员缴纳的医疗互助金列工会什么科目
  • 出口退的税交附加税吗
  • 应收账款平账怎么处理
  • 商家代金券谁出钱
  • 以自营方式建造固定资产
  • 异地工程开票要注意什么手续
  • 未确认融资费用计算公式
  • 开出发票后直接做账吗?
  • 营业外支出的具体内容
  • 电子承兑汇票到期网银上怎么操作
  • 工程结算的会计分录怎么做
  • 收到融资租赁发票要交印花税吗
  • 待转销项税额对应科目
  • 进项税的发票
  • Centos 7.3下SQL Server安装配置方法图文教程
  • Fedora 21顶栏日期显示不全的解决方法
  • 让Windows Server 2008设备驱动安装图文教程
  • 电脑系统信息怎么关闭
  • 忘记ubuntu root密码
  • windowsqq截屏
  • win10mobile升级顾问
  • 让你的好朋友评价你图片
  • win7无法安装怎么办
  • win7切换输入法不见了怎么弄出来
  • win8系统安装条件
  • win8如何使用
  • Python插件怎么安装
  • nodejs搭建本地资源服务器
  • 置顶高站位
  • jquery解析XML及获取XML节点名称的实现代码
  • 税务个人廉洁谈话记录内容
  • 车辆购置税已缴款未入库可以上牌吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设