首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

960 grid的clearfix vs HTML5 Boilerplate的clearfix - 有什么区别?

960 grid的clearfix和HTML5 Boilerplate的clearfix都是用于清除浮动的技术,但它们有一些区别。

960 grid的clearfix是一种基于960网格系统的清除浮动方法。960网格系统是一种常用的网页布局系统,它将页面分为12列,每列宽度为60像素。在使用960 grid系统布局的网页中,为了避免浮动元素造成的布局混乱,可以使用960 grid的clearfix来清除浮动。这个clearfix的实现方式是在浮动元素的父容器上添加一个clearfix类,通过设置该类的样式来清除浮动。

HTML5 Boilerplate的clearfix是一种通用的清除浮动方法,适用于任何网页布局。HTML5 Boilerplate是一个流行的前端开发模板,提供了一套标准的HTML、CSS和JavaScript文件,用于快速搭建网页项目。其中包含了一个clearfix类,可以用于清除浮动。HTML5 Boilerplate的clearfix通过设置该类的样式来清除浮动,具体实现方式与960 grid的clearfix可能有所不同。

区别:

  1. 960 grid的clearfix是为了解决960网格系统布局中的浮动问题而设计的,而HTML5 Boilerplate的clearfix是一个通用的清除浮动方法。
  2. 960 grid的clearfix是960网格系统的一部分,而HTML5 Boilerplate的clearfix是HTML5 Boilerplate模板的一部分。
  3. 具体的实现方式可能有所不同,因为它们是由不同的项目开发团队设计的。

推荐的腾讯云相关产品和产品介绍链接地址:

腾讯云提供了一系列云计算产品,包括云服务器、云数据库、云存储等。您可以访问腾讯云官方网站了解更多详情:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端学习(22)~css问题讲解

好处: 便于开发者阅读和维护 有利于SEO:让浏览器爬虫和辅助技术更好解析, 语义化标签介绍: 在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div本身是没有语义。...但是现在,HTML5中加入了一些语义化标签,来更清晰表达文档结构。 meta viewport 是做什么用,怎么写?...css reset 和 Normalize.css 什么区别 二者都是用来统一浏览器默认样式: reset:重置。...(另一种推荐做法:padding-top: 0.1px;) 如何清除浮动 (1)overflow: hidden (2).clearfix 清除浮动写在爸爸身上 .clearfix::after...概念上区别: 伪类表示一种状态 伪元素是真的元素。比如 ::after 是真的元素,可以在页面上显示内容。 使用上区别: 伪类:使用单冒号 伪元素:使用双冒号

55120

基于HTML美食文化网页设计与实现——html+css+javascript+jquery+bootstarp响应式西餐厅美食网站

该模块左侧个美食分类,用户可以选择自己喜欢种类,当点击种类后,就会在右侧出现该分类下各种美食,用户可以点击自己感兴趣食品,从而看到它具体信息。...静态网站编写主要是用HTML DIV+CSS JS等来完成页面的排版设计‍,常用网页设计软件Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate...等等,用最多还是DW,当然不同软件写出前端Html5代码都是一致,本网页适合修改成为各种类型产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。...我拱门最棒地方就是爱 ..."> 类别 </h3

1.3K20

10·灵魂前端工程师养成-CSS布局(上)

---- 布局介绍 ---- 什么是布局 布局分类: 1.固定宽度布局,一般宽度为 960/1000/1024px 类似于淘宝 2.不固定宽度布局,主要靠文档流原理来布局 一般用来手机页面的布局...然后完善每个部分小布局 从小到大: 先完成小布局 然后组合成大布局 两种均可: 新人推荐第二种,因为小简单 老手一般用第一种,因为熟练大局观 ---- 一般布局需要用到哪些属性  三种布局...: 1.float布局 2.grid布局 3.flex布局 float布局 ---- float布局步骤 在子元素上加float: left和width 在父元素上.clearfix 一行六个字 <div class="imageList...     flex常用套路 使用flex,重写之前<em>的</em>float页面 <!

42220

基于HTML游戏网站项目的设计与实现 HTML+CSS+JavaScript电竞游戏介绍响应式网页(7页)

然而,对于技术探索和追求从未停歇。 坚持原创,热衷分享,初心未改,继往开来! 一、‍网站题目 游戏官网、⛹️游戏网站、️电竞游戏、游戏介绍、等网站设计与制作。...一套A+网页应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 所有页面相互超链接,可到三级页面,5-10个页面组成。... 三、网站介绍 网站布局方面:计划采用目前主流、能兼容各大主流浏览器、显示效果稳定浮动网页布局结构。...网站程序方面:计划采用最新网页编程语言HTML5+CSS3+JS程序语言完成网站功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站效果。...网站素材方面:计划收集各大平台好看图片素材,并精挑细选适合网页风格图片,然后使用PS做出适合网页尺寸图片。

78420

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries,翻译过来就是让ie8及以下支持html5...后来我想,换一种方法,把外边框定死高度,然后依旧该浮动浮动,勉强撑过这一关。 但是以后,ie不能定死高度情况下怎么办? 看来是我清楚浮动clearfix内部代码没有写兼容处理原因啊。...table; 8 9 } 10 11 .clearfix:after { 12 13 clear: both; 14 15 } 其他搜集比较有用 清楚浮动方法 第一种写法: 1 .clearfix...11、ul标签在Mozilla中默认是padding值,而在IE中只有margin值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题 这里还有一篇大神总结兼容性文章...,专门针对IE浏览器(IE6-11),链接如下: http://www.cnblogs.com/liuzhendong/p/4309790.html 以下是脚本之家几篇文章,对于css hack 很明确

1.6K50

建议收藏!总结了42种前端常用布局方案

Flex方案 通过 Flex 可以很多方式实现这个居中布局效果。...Grid方案 通过 Grid 布局实现该功能主要是通过template属性实现,具体代码如下所示: .container { display: grid; /* 将其划分为两行,其中一列本身宽度决定..., 一列占剩余宽度*/ grid-template-columns: auto 1fr; } 三列布局 三列布局主要分为两种: 第一种是前两列定宽,最后一列自适应,这一种本质上与两列布局没有什么区别...实现CSS代码如下: .container { display: grid; /* 将其划分为两行,其中一列本身宽度决定, 一列占剩余宽度*/ grid-template-columns:...Grid方案 实现步骤如下 开启 grid 布局 置最小高度为当前视口,使不管中间部分多高,始终都可以保持在底部 实现CSS代码如下: .main { /* 开启grid布局 */ display

4.1K30
领券