<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
方法一（使用空标签带clear属性）标签可以是div br hr
在浮动元素后使用一个空元素如<div class="clear"></div>，
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />
或<hr class="clear" />来进行清理。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，
解决方法：font-size:0;或overflow:hidden;
在浮动元素下加<br clear="all">用以清除浮动
方法二（给浮动元素的父元素添加overflow属性）（zoom:1）
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!
overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，
注意，zoom不符合W3C标准。overflow:hidden也可以实现。
<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三：（给浮动的元素的容器添加浮动）
<!--为父级添加float来清楚浮动-->
<div style="float: right;background-color: #1a1a1a;">
<div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
</div>
<div style="width: 500px;height: 200px;background-color: #8a6d3b">
</div>
</div>
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四： （使用after伪对象清除浮动）
after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，
可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
通过after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，
<style type="text/css"> .listinfo:after{display:block;clear:both;content:"";
visibility:hidden;height:0;} c< class="listinfo">/
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法五：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
方法与添加一个空标签类似，只是此处用浮动元素紧邻的元素
推荐!!!
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰;
双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发
双倍边距
。快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。
3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。快速修正：在受影响的文本上设置宽度或高度。
IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
方法一（使用空标签带clear属性）标签可以是div br hr
在浮动元素后使用一个空元素如<div class="clear"></div>，
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />
或<hr class="clear" />来进行清理。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，
解决方法：font-size:0;或overflow:hidden;
在浮动元素下加<br clear="all">用以清除浮动
方法二（给浮动元素的父元素添加overflow属性）（zoom:1）
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!
overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，
注意，zoom不符合W3C标准。overflow:hidden也可以实现。
<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三：（给浮动的元素的容器添加浮动）
<!--为父级添加float来清楚浮动-->
<div style="float: right;background-color: #1a1a1a;">
<div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
</div>
<div style="width: 500px;height: 200px;background-color: #8a6d3b">
</div>
</div>
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四： （使用after伪对象清除浮动）
after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，
可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
通过after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，
<style type="text/css"> .listinfo:after{display:block;clear:both;content:"";
visibility:hidden;height:0;} c< class="listinfo">/
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法五：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
方法与添加一个空标签类似，只是此处用浮动元素紧邻的元素
推荐!!!
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰;
双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发
双倍边距
。快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。
3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。快速修正：在受影响的文本上设置宽度或高度。
IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
