您的当前位置：首页 clearfix:after[的用法]_html/css_WEB-ITnose

clearfix:after[的用法]_html/css_WEB-ITnose

来源：六九路网

css 浏览器 html

为什么不能直接用

.clear{clear:both}

希望能贴出HTML+CSS的详细用法, 如

.clear{clear:both}

在哪个浏览器不兼容

再能贴出.clearfix:after和.clearfix能兼容各浏览器代HTML+CSS的详细用法

急用...希望能深入了解清楚浮动的朋友能解决我这个疑问

回复讨论(解决方案)

clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.clear="left"
实例
图像的左侧和右侧均不允许出现浮动元素：
img
{
float:left;
clear:both;
}

clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.clear="left"
实例
图像的左侧和右侧均不允许出现浮动元素：
img
{
float:left;
clear:both;
}

.clearfix:after可以在子节点float的时候撑开父节点

首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。

这个效果是外层div不会包含内层div。因为浮动的元素脱离了原始文档流。
以上面这个为例：一般而言，有三种方式清除浮动
。第一：让外层元素也浮动，例如：

然后再此元素之外的元素上添加clear：both效果。
第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法：

 .clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}

.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
第三：利用 overflow属性

谢谢....终于懂了...