最近我在浏览一些网站的代码,看到每个<div>都有一个类clearfix。
在快速谷歌搜索后,我了解到它是IE6有时,但实际上什么是一个clearfix?
你能提供一些例子的布局与一个clearfix,比较没有一个布局clearfix?
最近我在浏览一些网站的代码,看到每个<div>都有一个类clearfix。
在快速谷歌搜索后,我了解到它是IE6有时,但实际上什么是一个clearfix?
你能提供一些例子的布局与一个clearfix,比较没有一个布局clearfix?
当前回答
如果你不需要支持IE9或更低版本,你可以自由地使用flexbox,也不需要使用浮动布局。
值得注意的是,如今,使用浮动元素进行布局的做法越来越不受欢迎,人们开始使用更好的替代方法。
display: inline-block -更好 Flexbox -最佳(但浏览器支持有限)
Flexbox支持Firefox 18, Chrome 21, Opera 12.10和Internet Explorer 10, Safari 6.1(包括Mobile Safari)和Android的默认浏览器4.4。
详细的浏览器列表请参见:https://caniuse.com/flexbox。
(也许一旦它的位置完全确立,它可能是绝对推荐的布局元素的方式。)
clearfix是一种元素自动清除其子元素的方法,这样您就不需要添加额外的标记。它通常用于浮动布局中,其中元素被浮动以水平堆叠。
clearfix是一种解决浮动元素零高度容器问题的方法
clearfix的执行如下:
.clearfix::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
或者,如果你不需要IE<8的支持,下面的也可以:
.clearfix::after {
content: "";
display: table;
clear: both;
}
通常你需要做以下事情:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
使用clearfix,您只需要以下内容:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
阅读这篇由Chris Coyer @ CSS-Tricks撰写的文章
其他回答
其他答案都是正确的。但我想补充的是,当人们第一次学习CSS时,它是一个时代的遗迹,滥用float来做所有的布局。Float是用来在长文本旁边放置浮动图像的,但很多人把它作为主要的布局机制。因为这并不是真正的目的,你需要像“clearfix”这样的技巧来让它工作。
如今,display: inline-block是一个可靠的选择(除了IE6和IE7),尽管更多的现代浏览器正在推出更有用的布局机制,如flexbox, grid layout等。
实现clearfix的另一个(也许是最简单的)选项是使用overflow:hidden;在包含元素上。例如
.parent { 背景:红色; 溢出:隐藏; } .segment-a { 浮:左; } .segment-b { 浮:正确; } < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >
当然,这只能在您不希望内容溢出的情况下使用。
这是一个不同的方法,同样的东西,但有点不同
区别在于内容点被替换为\00A0 ==空格
更多信息http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
这是它的精简版……
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
clearfix允许容器包装其浮动子容器。如果没有clearfix或等效的样式,容器就不会围绕它的浮动子容器而崩溃,就好像它的浮动子容器是绝对定位的一样。
clearfix有几个版本,Nicolas Gallagher和Thierry Koblentz是主要作者。
如果你想要支持旧的浏览器,最好使用这个clearfix:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
在SCSS中,你可以使用以下技巧:
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
如果你不关心是否支持旧的浏览器,有一个更短的版本:
.clearfix:after {
content:"";
display:table;
clear:both;
}
什么是Clearfix?
一种元素自动清除其子元素的方法,无需任何额外标记。
使用属性:CSS clearfix用于修复来自所需元素的溢出元素。这可以使用3个属性:
溢出财产 高度属性 浮动属性
这3个CSS属性都用于修复溢出元素。
为什么ClearFix ?
为了避免添加不必要的标记,元素可以使用clearfix自动清除或修复其元素。 它被用于浮动布局,其中元素被浮动以形成水平堆栈。
当Clearfix ?
当两个或两个以上的浮动项目放在一起时。
当项目以这种方式定位时,父容器的高度为0,这很容易弄乱布局。浏览器之间的问题是不一致的,这使得问题更加困难。为了解决所有这些问题,创建了clearfix。
是这样的:
示例(供您理解):
<head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix { overflow: auto; } </style> </head> <body> <h2>Without Clearfix</h2> <p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">With Clearfix</h2> <p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body>
以上代码输出:
Clearfix正在过时吗?
在它第一次被提出并在2007年和2013年进行了更新后,将近15年的今天,clearfix已经失去了相关性,因为今天CSS Grid和Flexbox正在填补web上高级布局的空白。
希望能有所帮助。