clearfix类在CSS中做什么？

clearfix类在CSS中做什么？

浮子如何工作

当页面上存在浮动元素时，非浮动元素 将包裹在 浮动元素 周围 ，类似于文本在报纸上围绕图片的方式。从文档的角度（HTML 的 原始目的
）来看，这就是浮动的工作方式。

float

与

display:inline

在发明之前

display:inline-block

，网站用于

float

将元素彼此并排设置。相对于后者

float

更可取，

display:inline

因为后者不能设置元素的尺寸（宽度和高度）以及垂直填充（顶部和底部），因为浮动元素被视为块元素，所以浮动元素可以做到。

浮动问题

主要问题是我们正在使用

float

其预期目的。

另一个是，尽管

float

允许并排放置块状元件，但 浮子不会为其容器赋予形状
。就像

position:absolute

，其中元素“从布局中取出”。例如，当一个空容器包含一个浮动的100px x
100px时

<div>

，

<div>

不会为该容器赋予100px的高度。

与不同

position:absolute

，它会影响周围的内容。浮动元素之后的内容将“环绕”元素。它从在其旁边渲染然后在其下面渲染开始，就像报纸文本在图像周围的流动方式一样。

抢救的Clearfix

什么 clearfix 确实是彩车或含彩车来呈现它下面的容器后力的内容。clear-fix有很多版本，但它的名称来自常用的版本-
使用CSS属性的版本

clear

。

例子

根据浏览器和用例，有几种方法可以执行clearfix。只需知道如何

clear

在CSS中使用该属性以及如何在每个浏览器中进行浮点渲染，即可实现完美的跨浏览器清除修复。

你有什么

您提供的样式是具有向后兼容性的clearfix形式。我找到了有关此clearfix的文章](。事实证明，这是一个旧的clearfix-仍然适合旧的浏览器。文章中也有一个更新，更干净的版本。细目如下：

• 您拥有的第一个clearfix

  clear:both

  在目标元素和下一个元素之间追加了一个样式为的不可见伪元素。这将迫使伪元素在目标下方进行渲染，而下一个元素在伪元素下方进行渲染。

• 第二个追加了

  display:inline-block

  以前的浏览器不支持的样式。inline-block类似于inline，但是为您提供了一些可阻止元素的属性，例如宽度，高度以及垂直填充。这是针对IE-MAC的。

• display:block

  由于上述IE-MAC规则，这是重新应用。该规则是IE-MAC中“隐藏”的。

总而言之，这3条规则可以确保

.clearfix

跨浏览器正常工作，并牢记旧的浏览器。