Rumah > hujung hadapan web > tutorial css > css float 清除浮动 haslayout

css float 清除浮动 haslayout

巴扎黑
Lepaskan: 2017-06-28 10:38:04
asal
1677 orang telah melayarinya

1:float使得指定元素脱离普通的文档流而产生的特别的布局特性。它必需应用在块级元素之上,也就是说浮动并不应用于内联标签。当应用了float那么这个元素将被指定为块级元素。例如一个内联元素设定了float之后就可以给它设定宽高。

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Salin selepas log masuk

:after 伪元素在元素之后添加内容,这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。用after产生的内容是个空格,先display:block,然后高度为0,不让他影响布局,隐藏和height:0差不多就是不要影响布局。clear:both就是清除 浮动.不支持after的浏览器ie6、ie7就是加一个height:1%;就ok了,这样的话ie6,ie7就会拥有haslayout。

2:haslayput

其实haslayout 是Windows Internet Explorer7以下渲染引擎的一个内部组成部分,

在InternetExplorer7以下中,一个元素要么自己对自身的内容进行计算大小和组织,要 么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算 和定位。简单来说,而不是依赖于祖先元素来完成这些工作。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,拥有 haslayout的元素,通常显示为“haslayout = -1”。

这里的has layout就是对自己和可能的子孙元素进行尺寸计算和定位来决定父元素的高度,也就是父元素适应了里面内容的高度,这回大家就明白为什么加入一个 height:1%的原因了,当然也可以加入其它的属性使其has layout,如width等。当然加float也可以(float也可以触发layout),但不推荐,不要用floa来清除浮动,这样float又会 产生一个浮动。

,,


,