clearfix类在css中做什么?

我已经看到div标签使用clearfix类时,它的子divs使用float属性。 clearfix类看起来像这样:

 .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } 

我发现,如果我不使用clearfix当我使用bottom-border属性,边框将显示在子divs之上。 有人可以解释clearfix类是干什么的吗? 另外,为什么有两个display属性? 这对我来说似乎很奇怪。 我特别好奇什么content:'.' 手段。

谢谢,G

如何漂浮工作

当页面上存在浮动元素时,非浮动元素环绕浮动元素,类似于文本在报纸中的图片周围。 从文档的angular度来看(HTML的原始目的 ),这就是浮动的工作原理。

float VS display:inline

display:inline-block发明前display:inline-block ,网站使用float来设置元素彼此相邻。 float优于display:inline因为使用后者,不能设置元素的尺寸(宽度和高度)以及垂直填充(顶部和底部) – 浮动元素可以执行的操作,因为它们被视为块元素。

浮动问题

主要的问题是,我们正在使用float预期的目的。

另一个是虽然float允许并排的块级元素,但浮动不赋予其容器形状 。 这就像是position:absolute ,元素被“取出布局”。 例如,当一个空的容器包含一个浮动的100px x 100px <div><div>不会将100px的高度赋予容器。

position:absolute不同,它会影响周围的内容。 浮动元素之后的内容将“包裹”元素。 它开始在旁边渲染,然后在下面渲染,就像报纸文字如何在图像周围stream动一样。

Clearfix来拯救

clearfix所做的就是强制浮动内容或包含浮动的容器在其下面呈现内容。 clear-fix有很多版本,但是它的名字来自通常使用的版本 – 使用CSS属性clear

例子

根据浏览器和用例, 以下是几种执行clearfix的方法 。 我们只需要知道如何在CSS中使用clear属性,以及如何在每个浏览器中呈现浮动,以便实现完美的跨浏览器清除。

你有什么

您提供的样式是向后兼容的clearfixforms。 我find了关于这个clearfix 的文章 。 事实certificate,这是一个旧的clearfix – 仍然迎合旧的浏览器。 文章中还有一个更新,更干净的版本。 这是细节:

  • 你有第一个clearfix附加一个不可见的伪元素,这是clear:both风格clear:both目标元素和下一个元素之间。 这将强制伪元素呈现在目标下方,以及伪元素下的下一个元素。

  • 第二个追加了以前的浏览器不支持的样式display:inline-block 。 内联块像内联,但给你一些阻止元素的属性,如宽度,高度以及垂直填充。 这是IE-MAC的目标。

  • 这是由于上面的IE-MAC规则而导致的display:block的重新应用。 这个规则是从IE-MAC“隐藏”的。

总而言之,这.clearfix规则使得.clearfix跨浏览器工作,并且考虑到旧浏览器。

当元素(如divfloated ,其父容器不再考虑其高度,即

 <div id="main"> <div id="child" style="float:left;height:40px;"> Hi</div> </div> 

父容器默认不会是40像素高。 如果您使用这些容器来构build布局,这会导致很多奇怪的小怪癖。

所以各种框架使用的clearfix类通过使父容器“确认”包含的元素来解决这个问题。

每天,我通常只是使用框架,如960gs,Twitter Bootstrap进行布局,而不是打扰到确切的机制。

可以在这里阅读更多

http://www.webtoolkit.info/css-clearfix.html

clearfix我相同的Overflow:hidden都清除漂浮的孩子父母。 但是clearfix并没有把它的parent元素溢出来。 但它的工作,直到IE8及以上。

没有必要定义"." 在内容&.clearfix。 只是这样写:

 .clr:after { clear: both; content: ""; display: block; } 

HTML

 <div class="parent clr"></div> 

阅读这些链接了解更多

http://css-tricks.com/snippets/css/clear-fix/

我可以使用什么“clearfix”方法?