CSS清除浮动

"90%的CSS布局的兼容问题都是浮动布局引起的",这是我无意中听到某位前端人员的抱怨。

某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。

我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。

空标签法

在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:

<style type="text/css">
    .clear{ clear:both; height:0;overflow:hidden;}
    .float_left{ float:left; }
    .float_right{ float:left; }
    </style>


    左浮动元素




    右浮动元素

空标签法简单有效,对浏览器的兼容性也很不错,空标签也不一定限于div,也可以是其他的标签p、span、br,值得注意的是在标准浏览器下这个空标签必须是块级元素,比如在使用span的时候就得将它转换成块级元素(display:block),在IE6/7下内联元素也可以。空标签法由于使用起来简单,受到广大新手朋友的青睐,我也时常为了省事,用这种办法。空标签法的缺点就是要多加一个额外的标签,这样HTML代码看起来就不够优雅,如果浮动元素较多,那么空标签也会很多。

overflow

子级元素有浮动,可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。

<style type="text/css">
    .list{list-style:none;width:300px;}
    .list li{overflow:hidden;}
    .list a{ float:left; }
    .list span{ float:right; }
    </style>




      * 链接测试


      * 链接测试


      * 链接测试


该方法可以兼容标准浏览器以及IE7 ,对IE6无效。这个方法我平时用得比较多,但是也有个弊端,众所周知,使用了overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了。

IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性,很多兼容问题都是由此引起的,某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow,那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有:

  • 1. 设置一个显式的高度或宽度(不能为auto)
  • 2. zoom:1
  • 3. display: slots online inline-block (hack形式)
  • 4. float:left/right (hack形式)

用上面无序列表的为例来清除IE6/7的浮动的话,上面列出的触发hasLayout的方法1、方法2、方法3都会有一个4px的下间距BUG,用*margin-bottom:-4px修复即可。

float

子元素有浮动,给父元素也添加一个浮动(float:left),在标准浏览器下和IE6/7/8下都有效,但是这个父级元素浮动了又得清除父级元素的浮动,所以该方法的应用场景很受限制,不推荐使用。

:after

:after是一个伪类元素,经常与content结合使用,用来给元素的后面添加内容,该方法用来清除浮动可以兼容标准浏览器和IE8,IE6/IE7无效。

<style type="text/css">
    .box{
    zoom:1; /*兼容IE6/7的清除浮动*/
    }
    /*兼容标准浏览器*/
    .box:after{
     content:""; /*具体的值与清除浮动无关,尽可能的节省字符*/
     clear:both; 
     overflow:hidden; 
     height:0; /*0高度使其不占用布局空间*/
     display:block; /*设置成块级元素*/
     }
    .float_left{ float:left;}
    .float_right{ float:left;}
    </style>





    左




    右




我个人理解该方法就是和空标签的原理一样,都是在后面添加一个清除浮动的元素,而该方法用的是CSS来生成"空标签",不知道这样理解是否有误,如果哪位看客有更好的说法,望告知。

上面提到的方法都是各有优缺点,并没有一种"最优"的解决方法,可能看到这里发现有点被忽悠的感觉,只能说,清除浮动的这几种方法都要看实际的应用场合,因为HTML的结构是多变的。如果你也有清除浮动的好方法,欢迎提出,共同探讨。

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:1月以前  |  121次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:1月以前  |  105次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:1月以前  |  101次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:1月以前  |  132次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:1月以前  |  113次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:1月以前  |  103次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:1月以前  |  166次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:1月以前  |  119次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:1月以前  |  110次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:1月以前  |  116次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:1月以前  |  112次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  4910次阅读
初探 React 组件 1年以前  |  2183次阅读
wordpress标签页的制作 1年以前  |  2071次阅读
Node.js下通过配置host访问URL 1年以前  |  2014次阅读
js动态创建类和实例化 1年以前  |  2000次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1970次阅读
22个HTML5的初级技巧 1年以前  |  1921次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1912次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1882次阅读
第三版主题上线 1年以前  |  1881次阅读
CSS清除浮动 1年以前  |  1870次阅读
2014年度总结 1年以前  |  1819次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1811次阅读
利用服务器返回header来传输数据 1年以前  |  1803次阅读
获取元素的计算的样式 1年以前  |  1798次阅读