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 style="float:left"></div></div>

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

<div style="float:left" >   <div style="float:left"></div></div>

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

<div style="clearfix" >   <div style="float:left"></div></div>.clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}

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

<div style="overflow:hidden" >   <div style="float:left"></div></div>

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