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

  • 怎么样才能让别人扫你的二维码!(怎么样才能让别人相信你)

    怎么样才能让别人扫你的二维码!(怎么样才能让别人相信你)

  • 优酷酷喵会员与优酷会员区别(优酷酷喵会员与优酷会员区别会双扣费吗)

    优酷酷喵会员与优酷会员区别(优酷酷喵会员与优酷会员区别会双扣费吗)

  • 华为nova5pro可以插tf卡吗(华为nova5pro可以扩展内存吗)

    华为nova5pro可以插tf卡吗(华为nova5pro可以扩展内存吗)

  • 华为am60连接不上手机(华为am10s蓝牙连接不上)

    华为am60连接不上手机(华为am10s蓝牙连接不上)

  • 华为p40字体怎么调大(华为p40字体怎么放大)

    华为p40字体怎么调大(华为p40字体怎么放大)

  • x电容和y电容作用(x电容和y电容连接方式)

    x电容和y电容作用(x电容和y电容连接方式)

  • 微信收款多了会被限制吗(微信收款多了会封号吗)

    微信收款多了会被限制吗(微信收款多了会封号吗)

  • 面容id进水吹干会正常吗(面容进水为什么导致开不了机)

    面容id进水吹干会正常吗(面容进水为什么导致开不了机)

  • 微信夜览怎么设置(微信怎样打开夜间)

    微信夜览怎么设置(微信怎样打开夜间)

  • 无线端和pc端是什么意思(无线端和pc端是一样的吗)

    无线端和pc端是什么意思(无线端和pc端是一样的吗)

  • 如何缓存电视剧(如何缓存电视剧到手机)

    如何缓存电视剧(如何缓存电视剧到手机)

  • 小红书为什么老是闪退(小红书为什么老是登陆已过期)

    小红书为什么老是闪退(小红书为什么老是登陆已过期)

  • soul擦灰对方知道是谁吗(soul擦灰后怎么知道回没回来)

    soul擦灰对方知道是谁吗(soul擦灰后怎么知道回没回来)

  • iphone11单手模式怎么开(苹果11 单手模式)

    iphone11单手模式怎么开(苹果11 单手模式)

  • 拼多多助力次数上限怎么办(拼多多助力次数什么时候刷新)

    拼多多助力次数上限怎么办(拼多多助力次数什么时候刷新)

  • 华为nfc功能怎么开启(华为nfc功能怎么打开)

    华为nfc功能怎么开启(华为nfc功能怎么打开)

  • 小米9pro手机耗电快怎么解决(小米9pro耗电太快)

    小米9pro手机耗电快怎么解决(小米9pro耗电太快)

  • 小米智能卡在哪打开(小米智能卡在哪里升级)

    小米智能卡在哪打开(小米智能卡在哪里升级)

  • 淘宝预售订单在哪里(淘宝预售订单可以退款吗)

    淘宝预售订单在哪里(淘宝预售订单可以退款吗)

  • 魅族手机远程管理怎么用(魅族手机远程操作)

    魅族手机远程管理怎么用(魅族手机远程操作)

  • 栏宽6.8厘米怎么设置(栏宽6.8厘米怎么设计)

    栏宽6.8厘米怎么设置(栏宽6.8厘米怎么设计)

  • pin怎么设置(windows设置pin怎么设置)

    pin怎么设置(windows设置pin怎么设置)

  • slaaloo是什么型号(slaaloo是什么型号手机)

    slaaloo是什么型号(slaaloo是什么型号手机)

  • vivo手机数据怎么转换(vivo手机数据怎么恢复)

    vivo手机数据怎么转换(vivo手机数据怎么恢复)

  • 美团众包如何切换城市(美团众包如何切换地图)

    美团众包如何切换城市(美团众包如何切换地图)

  • 人人视频扫码在哪里(人人视频有没有扫一扫)

    人人视频扫码在哪里(人人视频有没有扫一扫)

  • Windows11怎么设置自动关机?Win11设置自动关机方法(windows11怎么设置锁屏密码)

    Windows11怎么设置自动关机?Win11设置自动关机方法(windows11怎么设置锁屏密码)

  • php定义常量方法的区别(php定义变量的方法)

    php定义常量方法的区别(php定义变量的方法)

  • 增值税需要年度报税吗
  • 暂时进出境货物和暂准进出境货物
  • 我国企业基本所得税的税率
  • 未入账的固定资产处理的财务处理
  • 规划设计合同需要缴纳印花税吗为什么
  • 小规模纳税人开具增值税专用发票
  • 蔬菜批发销售免税政策
  • 房地产企业交纳所得税吗
  • 质量问题扣对方货款账务处理
  • 事业单位代扣社保公积金分录怎么写的
  • 卷式增值税发票校验码怎么查
  • 农产品初加工免征企业所得税
  • 专票可以当费用票吗
  • 租金收入增值税纳税义务
  • 分公司有法律效力吗
  • 私自安装路灯违法吗?
  • 房地产开发企业什么意思
  • 损益表现金流量表资产负债表
  • 所有者权益合计是负数是什么意思
  • 付款后多久开发发票
  • 业务费用包干制
  • 日用品做账时放什么东西
  • 多缴的企业所得税如何处理
  • 公司免税是指免的什么税
  • linux中不能使用的shell
  • 合同违约金可以全额扣除吗
  • vue watch监听vuex数据
  • PHP:pcntl_wifexited()的用法_PCNTL函数
  • 各级税务机关应当遵循依法
  • yolov5怎么改进
  • 非货币性资产交换和债务重组的区别
  • 矿产资源补偿费计入管理费用吗
  • 独立核算统负盈亏和独立核算自负盈亏的区别
  • 一文教会你何为重绘、回流?
  • 分次预缴税额怎么算
  • php redis数据类型
  • 怎么让gridview居中
  • 饿了么指定单
  • php图片库
  • 个人所得税累计扣除是什么意思
  • php多选
  • 律师事务所主要业务范围介绍
  • 个体户个人所得税税率表2023计算
  • 现金流量表本月数和本年累计数是相等的么
  • 企业福利费超过预算收入
  • 税务新法规
  • 库存商品和固定资产是单位会计资产核算的两项内容
  • 合并会计报表合并范围
  • 转月是下个月的意思吗
  • 对于在某一时点履行的履约义务,企业应当在客户
  • 预付账款期末可能有余额吗
  • 银行承兑汇票是什么意思
  • 个体工商户实收资本可以填0吗
  • 发工资用个人账户还是公司帐户
  • 强化劳务输出
  • 行政拨付工会经费可以用于职工福利发放吗
  • 电子记账凭证需要划线吗
  • Mysql主库死锁了导致从库停止复制
  • mysql数据库里面有一个表查的特别慢
  • sql如何随机抽样
  • winxp怎么装系统
  • mac蓝牙怎么连接耳机
  • thinkpad预装的office怎么激活
  • keyemain.exe是什么进程
  • 怎么安装u盘里的文件
  • linux系统中的链接文件主要分为两种
  • 进程 cmd
  • linux怎么修改主配置文件
  • jQuery实现非常实用漂亮的select下拉菜单选择效果
  • 直接利用外资
  • sql怎么设置自增列
  • 批处理重启后继续运行
  • python中列表的遍历
  • jquery获取table的tr
  • 安卓版本apk
  • python程序讲解
  • bootstrap轮播效果
  • 税收缴款书税务收现专用的开票人是谁
  • 动员讲话简短精辟
  • 如何理解涉税零风险概念
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设