Answers:
值得注意的是,如今,随着使用更好的替代方案,越来越不鼓励使用浮动元素进行布局。
display: inline-block
-更好Firefox 18,Chrome 21,Opera 12.10和Internet Explorer 10,Safari 6.1(包括Mobile Safari)和Android的默认浏览器4.4支持Flexbox。
有关详细的浏览器列表,请参见:https : //caniuse.com/flexbox。
(也许一旦位置完全确定,这可能是绝对推荐的元素布局方式。)
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>
content: "\00A0";
\ 00A0代表一个空格,简单的空格无法正常工作:)抱歉。:)
display: inline-block
对于基于块的布局,这比浮动效果更好。顾名思义,内联块是内联放置的-大多数布局都是基于块的,并且将这些块放置在内联格式上下文中只是没有意义的。您还必须处理与内联格式相关的各种问题,例如元素间空格,其他内联元素,大小,对齐方式等,正如许多其他人指出的那样。当然,浮动布局也不是很有意义,但是至少浮动具有基于块的优势。
其他答案是正确的。但是我想补充一点,这是人们最初学习CSS并滥用float
其所有布局的时间的遗物。float
用于在长文本旁边执行浮动图片之类的操作,但是很多人将其用作主要的布局机制。由于它并不是真的那么做,因此您需要使用“ clearfix”之类的hack程序才能使其正常工作。
这些天display: inline-block
是一个不错的选择(除了IE6和IE7除外),尽管更现代的浏览器以flexbox,grid layout等名称提供了更有用的布局机制。
在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;
}
div
包装包裹了浮动的元素?你能帮我形象化吗?
提供有关2017年第二季度情况的最新信息。
Firefox 53,Chrome 58和Opera 45中提供了新的CSS3显示属性。
.clearfix {
display: flow-root;
}
在此处检查任何浏览器的可用性:http : //caniuse.com/#feat=flow-root
元素(显示属性设置为flow-root)将生成一个块容器框,并使用流布局对内容进行布局。它总是为其内容建立一个新的块格式化上下文。
这意味着,如果使用包含一个或多个浮动子代的父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>
flow-root
真正的解决方案是使用Clearfix更改浮动的子代,而不使用聪明的hack来影响父代流程。
简而言之,clearfix是一个hack。
这是我们所有人都必须忍受的丑陋事情之一,因为这实际上是确保浮动的子元素不会溢出其父母的唯一合理方法。还有其他布局方案,但是浮动在当今的Web设计/开发中太普遍了,无法忽略clearfix hack的价值。
我个人倾向于Micro Clearfix解决方案(Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
在基于CSS浮点的布局中常用的一种技术是将少量CSS属性分配给您将包含浮点元素的元素。该技术通常使用称为的类定义clearfix
来实现,(通常)实现以下CSS行为:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
这些组合行为的目的是创建一个包含:after
单个'。'的活动元素容器。标记为“隐藏”,这将清除所有先前存在的浮动内容,并有效地将页面重置为下一个内容。
实现clearfix的另一个(也许是最简单的)选项是overflow:hidden;
在包含元素上使用。例如
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}
<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>
当然,这只能在您不希望内容溢出的情况下使用。
我尝试了接受的答案,但是内容对齐仍然存在问题。如下所示添加“:before”选择器可解决此问题:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
上面的LESS将编译为下面的CSS:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
这是一种不同的方法,但有一点不同
区别在于内容点被替换为\00A0
==whitespace
有关此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 {...}
,html[xmlns] .clearfix {...}
,* html .clearfix {...}
,和.clearfix {...}
所有的选择同样的事情,互相覆盖。这有点hacky,并不是真正需要的。
\00A0
,我认为这是因为跨浏览器兼容性和对时间的了解。
div
将完全扩展到适当的高度以包围其浮动子代。 webtoolkit.info/css-clearfix.html