问题的提出:
最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:
- <div id="outer">
- <div id="inner"> <h2>A Column</h2> </div>
- <h1>Main Content</h1>
- <p>Lorem ipsum</p>
- </div>
我们可以为“#inner”设定一个宽度值(比如说20%),但是由于div是块级元素,即使我们设定了宽度,其后面的内容也只能在下一行中显示,除非我们给它设定一个浮动属性(无论是向左浮动或者向右浮动)。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小,这不会有问题。
但是,如果“#inner”的高度超过了“#outer”,那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后,它就会脱离的文本流,无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一:未清除浮动时的布局表现
在这个例子中,最开始由于“#inner”的高度小于“#outer”所以不会有问题,但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围,而“#outer”没有发生改变。这就是我们所提到的“清除浮动(闭合浮动元素)”或者是“闭合浮动”问题
解决办法:
1)额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二:使用空div闭合浮动元素
我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题,不知道是什么原因?!
2)使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
- #outer:after{
- content:".";
- height:0;
- visibility:hidden;
- display:block;
- clear:both;
- }
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用,所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码
- /* 这段代码只有IE/Win可以看见 \*/
- CSS 规则
- /* 结束Hack */
上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理,在windows的IE 6上的清理浮动,可以使用如下代码:
- #outer {
- display:inline-block;
- }
- /* Holly Hack Begine \*/
- * html #outer {
- height:1%;
- }
- #outer {
- display:block;
- }
- /* End Hack */
例三:使用:after伪类清理浮动
如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
另外,似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
3)浮动外部元素,float-in-float
这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
例四:float-in-float
4)设置overflow为hidden或者auto
把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心,因为它会影响浏览器的表现。另外,在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动(闭合浮动元素),还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
#outer {
overflow:auto;
width:100%;
}
注意:如果你要在IE5/Mac上使用这种方法清除浮动(闭合浮动元素)的话,你就必须设定overflow的属性为值为hidden。
比较与选择
四种方法中使用哪种最好呢?首先,不推荐使用after伪类,对比其它三种方法,holly招数有点太烦琐,不好掌握,我上面讲到的holly招数中并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以我们又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。
那么其它三种方法其实都可以考虑。
- 不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
- 而对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
- float-in-float,也是一个很好的选择,把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。
参考:
http://www.positioniseverything.net/easyclearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
相关推荐
总结来说,CSS中的清除浮动有多种方法,包括传统的`clearfix`方法、使用`:clearfix`伪类和采用Flexbox布局。选择哪种方法取决于项目的需求,如兼容性、代码简洁性和布局复杂性等因素。理解这些方法的原理和应用场景...
总结来说,清除浮动是CSS布局中非常关键的一个环节,选择合适的方法取决于具体的布局需求和目标浏览器环境。理解各种清除浮动技术的原理和适用场景,可以帮助我们更好地实现复杂的网页设计。随着Web标准的发展,最佳...
`clearfix`是一种更通用的方法,可以在不增加额外HTML元素的情况下清除浮动。只需在父元素上应用一个特殊的类,如`.clearfix`,并在CSS中定义相应的规则。这是一种常见的做法,可以确保在不同的浏览器间保持良好的...
### XHTML + CSS清除浮动的三种方法 在XHTML与CSS页面重构过程中,处理浮动元素是一项关键技术。当元素被设定为浮动后,它们会脱离正常的文档流,并向左或向右移动,直到碰到容器边缘或其他浮动元素。这为布局带来...
以下是对这些清除浮动方法的详细解释: 1. 加入空`div`并设置`clear: both`: 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素,并设置`clear: both`,使其占据整个宽度,从而使父元素重新...
在实际开发中,常用的清除浮动方法主要有以下几种: 1. 使用clear属性:通过在浮动元素后面添加一个空的HTML元素,并给这个元素设置`clear:both`样式属性,来清除浮动的影响。这种方法简单,但是需要增加额外的DOM...
在CSS布局中,浮动元素(`float`属性设置...`clear:both`和CSS伪元素是两种经典的清除浮动方法,而现代布局技术如Flexbox和Grid提供了更强大且简洁的解决方案。选择哪种方法取决于项目需求、浏览器兼容性和代码简洁性。
另一种常用的清除浮动方法是通过设置容器的`overflow`属性为`hidden`或`auto`。这种方法不需要额外的HTML标记,而且兼容性良好,但在某些老版本的IE浏览器中可能需要加上`*zoom:1`来触发“hasLayout”,以确保正确...
以下是一些常见的清除浮动的方法: 1. **clearfix方法**: 这是最常用的方法之一,通过在父元素上应用一个特殊的类(如`.clearfix`)来解决高度塌陷问题。这个类通常包含一个伪元素,如`::before`或`::after`,并...
为了解决这个问题,开发者通常会采用各种方法来“清除浮动”。本文将详细介绍七种常见的CSS清除浮动的方法,并讨论它们的兼容性处理。 1. **添加空div法** 这是最原始的清除浮动方式,通过在浮动元素后面添加一个空...
总结来说,不同的清除浮动方法适用于不同的场景,选择哪种方法取决于项目需求、兼容性和代码维护性。通常,`:after`伪元素结合`clearfix`类是一种既高效又优雅的解决方案,但理解并掌握所有方法有助于应对各种复杂的...
总结来说,H5的“溢出隐藏”、“缩略图”和“清除浮动”是网页布局和设计中不可或缺的技术,它们分别帮助我们管理元素超出容器的显示、优化图像展示和修复因浮动元素引起的布局问题。熟练掌握这些技巧,能够使我们的...
首先,传统的清除浮动方法是通过添加额外的`clear:both`类或者使用空元素来完成。这种方法虽然简单有效,但在大量需要清除浮动的情况下,会增加HTML文档的冗余,对页面优化不利。例如: ```css .clear { clear: ...
- 使用`overflow:hidden` 方法来清除浮动在各种浏览器中都有很好的支持,包括IE6/7等老旧版本浏览器。 - 但需要注意的是,这种方法在处理某些特定的布局时可能会遇到一些问题,如IE6中的层套清除浮动的div,导致部分...
在总结这些方法时,我们还需要注意,虽然这些清除浮动的方法在大多数情况下都能有效地工作,但是由于它们各自的特点和适用场景,开发者在实际应用中应该根据具体的布局需求来选择最合适的方法。例如,如果一个页面中...