Rumah > hujung hadapan web > tutorial css > 分享一个清除浮动的优化方案

分享一个清除浮动的优化方案

零下一度
Lepaskan: 2017-05-11 11:30:43
asal
1582 orang telah melayarinya

clearfix hack做为一种无需借助额外标签清除浮动的方法已经人尽皆知了,本文给出一种优化方案,可以进一步减少所需css的数量。

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
Salin selepas log masuk

micro clearfix基于 Thierry Koblentz’s “clearfix reloaded优化而来,适用于现代浏览器(modern browsers)

下面是micro clearfix的代码片段

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
Salin selepas log masuk

"micro clearfix"生成伪类元素,并将其display属性设置为table,这样就会创建一个匿名table-cell,同时生成了新的BFC,这样意味着
:before伪类会阻止上边距折叠,:after伪类用于清除浮动,好处是不用隐藏产生的内容了,所需要的css代码就变少了。

为了清除浮动包含:before选择器是没必要的,但是:before的加入可以阻止top-margins折叠,这样有两个好处:

  • 同其他使用BFC方式清除浮动一样,确保了视觉上的一致,例如使用overflow:hidden

  • IE 6/7中使用zoom:1 时,确保了视觉上的一致
    N.B.: 有一个细节:IE 6/7中在新的BFC中浮动元素的下边距是不会包含在内的,进一步的描述可以看这里: Better float containment in IE using CSS expressions.
    content:" "的使用避免了一个Opera的bug,如果contenteditable属性同时出现在元素中时,这个bug会在待清除元素周围生成空格。一种可选的修复方案是使用 font:0/0 a,多谢Sergio Cerrutti测试出这个bug

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱(2)-css视频教程

Atas ialah kandungan terperinci 分享一个清除浮动的优化方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan