最近我在浏览一些网站的代码,看到每个<div>都有一个类clearfix。
在快速谷歌搜索后,我了解到它是IE6有时,但实际上什么是一个clearfix?
你能提供一些例子的布局与一个clearfix,比较没有一个布局clearfix?
最近我在浏览一些网站的代码,看到每个<div>都有一个类clearfix。
在快速谷歌搜索后,我了解到它是IE6有时,但实际上什么是一个clearfix?
你能提供一些例子的布局与一个clearfix,比较没有一个布局clearfix?
当前回答
在CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义来实现,(通常)实现以下CSS行为:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
这些组合行为的目的是创建一个容器:在活动元素之后,包含一个单独的'。'标记为隐藏,这将清除所有预先存在的浮动,并有效地重置页面的下一段内容。
其他回答
如果你不需要支持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撰写的文章
实现clearfix的另一个(也许是最简单的)选项是使用overflow:hidden;在包含元素上。例如
.parent { 背景:红色; 溢出:隐藏; } .segment-a { 浮:左; } .segment-b { 浮:正确; } < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >
当然,这只能在您不希望内容溢出的情况下使用。
其他答案都是正确的。但我想补充的是,当人们第一次学习CSS时,它是一个时代的遗迹,滥用float来做所有的布局。Float是用来在长文本旁边放置浮动图像的,但很多人把它作为主要的布局机制。因为这并不是真正的目的,你需要像“clearfix”这样的技巧来让它工作。
如今,display: inline-block是一个可靠的选择(除了IE6和IE7),尽管更多的现代浏览器正在推出更有用的布局机制,如flexbox, grid layout等。
提供2017年第二季度的最新情况。
新的CSS3显示属性在Firefox 53、Chrome 58和Opera 45中可用。
.clearfix {
display: flow-root;
}
查看任何浏览器的可用性:http://caniuse.com/#feat=flow-root
元素(其显示属性设置为flow-root)生成一个块容器框,并使用流布局布局其内容。它总是为其内容建立一个新的块格式化上下文。
这意味着如果你使用一个包含一个或几个浮动子div的父div,这个属性将确保父div包含它所有的子div。没有任何需要一个clearfix hack。在所有子元素上,甚至不能是最后一个虚拟元素(如果您在最后一个子元素上使用:before的clearfix变体)。
.container { display: flow-root; background-color: Gainsboro; } .item { border: 1px solid Black; float: left; } .item1 { height: 120px; width: 120px; } .item2 { height: 80px; width: 140px; float: right; } .item3 { height: 160px; width: 110px; } <div class="container"> This container box encloses all of its floating children. <div class="item item1">Floating box 1</div> <div class="item item2">Floating box 2</div> <div class="item item3">Floating box 3</div> </div>
在CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义来实现,(通常)实现以下CSS行为:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
这些组合行为的目的是创建一个容器:在活动元素之后,包含一个单独的'。'标记为隐藏,这将清除所有预先存在的浮动,并有效地重置页面的下一段内容。