清理浮动的整理

清理浮动是前端工程师每天都会用到的技术,目前清理浮动的技术形形色色,另很多新手眼花缭乱。所以我就结合了几篇文章,做了一些整理。

一、为什么要清理浮动?

这里我不做细讲,请新手参考《CSS Mastery》中有关浮动的章节。

简单的讲,当我们把一个框向左浮动起来时,它就会脱离文档流,并且向左移动,直到它左边缘碰到其父框的左边缘。当我们把框浮动起来后,会出现各种问题,比如下一个非浮动元素环绕着浮动框。这时候为了正确排版,我们需要把浮动清理。

二、如何清理浮动?

1、采用div标签clear的方式

1
<div class="clear"></div>
1
2
3
4
5
6
7
8
9
div.clear {
	clear:both;
	height:0;
	line-height:0;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
}

优点:代码量极少,复用性极高。

缺点:完全不能完美的适应语义化,不利于改版以及需求变更。

建议:初学者使用,可以让你快速的解决浮动问题。

2、采用br标签clear的方式