css .clearfix,谈谈CSS之关于clearfix清除浮动

原标题：谈谈CSS之关于clearfix清除浮动

在网上要是你随便一搜"css清除浮动"，就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

上图就是.clearfix的定义和应用，简单的说下.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

.clearfix的弊端

在上面的代码中可以看到，抛开IE6, 7不谈，.clearfix在标准浏览器下插入了一个

clear: both的元素，这样很可能清除掉不必要的浮动。如下例子：

上面的代码构成一个两列布局的页面。

注意，menu这个菜单设置了边框，但是由于menu的li元素是左浮动的，导致，menu没有高度，于是可以用.clearfix来清除.menu内部的浮动。代码如下：

重构.clearfix

上面的错误之后，分析一下除了.clearfix:after这种方式之外还有没有别的方法清除元素内部的浮动。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个，但是display: inline-block会产生多余空白，所以也排除掉。

剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，

这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。这样我们新的.clearfix就会闭合内部元素的浮动。

下面是重构之后的.clearfix。

责任编辑：

css .clearfix,谈谈CSS之关于clearfix清除浮动相关推荐

html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
【css】谈谈 css 的各种居中——读编写高质量代码有感
css 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法. 水平居中 1.行内元素水平居中(文本,图片) 给父层设置 text-align:center; ...
css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
清除浮动的最佳方案：clearfix
CSS清除浮动float闭合,很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;} 或者 .clear{clear:both;height:0;overflow:hidden ...
0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
CSS中清除浮动的代码
.clearfix:after {content: "\0020";display: block;height: 0;clear: both; }.clearfix {zoom: ...
CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...

css .clearfix,谈谈CSS之关于clearfix清除浮动

css .clearfix,谈谈CSS之关于clearfix清除浮动相关推荐

最新文章

热门文章