用哪些方法可以清除浮动

“Reloaded" clearfix

CSS Mojo 的 Thierry Koblentz‘ 写了另一篇文章来重新审视清除浮动,强有力地证明了使用 display: block 不会禁用外边距重叠,这比使用 display: table 更有优势。

最新的 micro-clearfix 代码:

.container::after {
  content: ""; /* If you do not care for “old” Opera */
  display: block;
  clear: both;}

(译注:如果要支持老 Opera 浏览器,应使用 content: " ")

“Best That ClearFix",一个为现代浏览器而生的 clearfix

CSS Mojo 的 Thierry Koblentz‘ 指出当编码目标为现代浏览器时,我们可以放心的移除 zoom 和 ::before 属性/值转而简单地使用:

.container::after {
  content: "";
  display: table;
  clear: both;}

这种方式不支持 IE6/7

Thierry 指出:“谨慎提醒:如果你要从头开始一个新项目,去吧!但是不要切换你现在使用的技术,因为即便你现在不打算支持老 IE 浏览器,你现在的规则仍能防止外边距重叠。”

Micro Clearfix

最新的全球都采用的 clearfix 解决方案,Micro Clearfix by Nicolas Gallagher.

.container::before, .container::after {
  content: "";
  display: table;}.container::after {
  clear: both;}.container {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */}

溢出属性

当定位内容不会超出容器的边距时,通常情况下该方法是优先选择的。

http://www.quirksmode.org/css/clearing.html - 阐述如何解决与此技术有关的常见问题,即,在容器上设置 width: 100%.

.container {
  overflow: hidden;
  display: inline-block; /* Necessary to trigger "hasLayout" in IE */
  display: block; /* Sets element back to block */}

除了使用 display 属性来为 IE 触发 "hasLayout",其它属性也可以在元素上触发 IE 的 "hasLayout".

.container {
  overflow: hidden; /* Clearfix! */
  zoom: 1; /* Triggering "hasLayout" in IE */
  display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */}

另一种使用 overflow 属性清除浮动的方式是用 underscore hack. IE 将会应用前置下划线属性的值,其它浏览器不会。zoom 属性将会在 IE 中触发 hasLayout:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */}

虽然可以工作,但使用 hack 并非理想的选择。

"::after" 伪元素

这种老的“简明清除”方法有允许定位元素悬挂在容器之外的优点,但是以付出更多棘手的 CSS 为代价的。

http://www.positioniseverything.net/easyclearing.html

.container {
  display: inline-block;}.container::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;}.container {
  display: block;}

除非你需要支持 IE 8,你应该总是对 before 和 after 使用双冒号 ::. 双冒号是伪元素的标准实现,并且不再建议使用单冒号。未来可能放弃对单冒号的支持。

对元素使用"clear"属性

简明扼要的方法:

<br style="clear:both" /> <!-- So dirty! -->

很多原因证明使用清除标签并不理想:

  • 主要原因:你将样式带入到了标记中。这意味着如果你不想使用相同标记的文档,重用标记将会变得更加困难。应该使用 CSS 在不同的上下文中对相同的标记进行格式化。
  • 不能为你的标签添加任何语义信息。
  • 使你的代码看起来不专业
  • 在未来你想使用其他的 clearfix 解决方案时,你将不得不回过头来删除所有的 <br> 标签。

原文来自:技术之家

时间: 2024-12-31 06:17:58

用哪些方法可以清除浮动的相关文章

清除浮动方法解析

清除浮动方法解析 清除浮动带来的额外影响 如果对于浮动不熟悉的同学,可以看看介绍float的文章.传送门:CSS float 我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷.针对父元素高度塌陷的问题,现在已经有了很多的解决方案.针对每一个方案,我们来进行深度的剖析. 添加空块级元素 这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素.缺点就是多了一些没有意义的标签.代码如下. //HTML <div class="cont

关于CSS清除浮动的几种方法

如果一个父元素的所有子元素都设置了float效果,则该父元素的高度不会被撑开且颜色也不会显示.这是因为子元素设置float效果后脱离了标准的文档流, 不占据文档空间所以不能把父元素撑开.有时为了解决这个问题可以使用下面几种方法来清除浮动效果. 方法一:使用空标签 该方法就是在子元素后再添加一个空标签,空标签可以是<div>也可以是<p>等,但是要设置样式clear : both ;这样就可以达到清除浮动的效果. 方法二:给父元素设置overflow: auto; 该方法是给父元素设

清除浮动——让包围元素包含浮动元素的四种方法

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 有一段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta

css清除浮动,清除浮动的几种方法

1.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素, 在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布 局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行清除浮动. 2.清除浮动的方法: (1)使用clear:both.如果我们明确的知道紧接着浮动元素后面的元素,可以使用这种方法来清除浮动.这种方 法简单,容易使用,不需要hack,语义化也不错. (2)空div方

CSS——如何清除浮动

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将di

web前端入门到实战:css浮动的特性,与浮动带来的影响以及如何清除浮动

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动的特性 1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围 2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素 3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤 5.块元素脱离

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

总结 清除浮动的四种常见方法

1.使用空标签清除浮动. 我用了很久的一种方法,空标签可以是div标签,也可以是P标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both.此方法的弊端在于增加了无意义的结构元素. ps:对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法.至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素).不过要注意的是,<br />本身

清除浮动的八种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码