css 中如何使用 clearfix 和 clear 清除浮动
adminCSS中的clearfix方法和clear属性都是用于解决由浮动（float）引起的布局问题。当使用浮动布局时，父元素往往无法自动计算包含浮动元素的高度，导致页面布局混乱。使用clear属性可以清除浮动，但它需要应用于元素上，这会造成额外的标记。而clearfix技术则允许父元素清除其子元素的浮动，而不需要在HTML中添加额外的标记。
clearfix 技术的核心在于使用伪元素 ::after 来创建一个看不见的元素，它位于浮动元素之后，可以强制父元素扩展以包含浮动元素。clear 属性用于指定元素的哪一侧不应该浮动元素，可以有 left、right 或 both 值。
一、CLEARFIX 技术的应用
传统 Clearfix 方法
.clearfix:after {content: "";
display: table;
clear: both;
}
将上述 CSS 类应用于任何需要进行clearfix的容器元素上即可。这种方法的原理是通过伪元素::after来模拟添加了一个隐形的元素，并且这个元素会清除浮动，实现清除浮动的效果，而不需要改变HTML结构。
现代 Clearfix 方法
随着浏览器更新，现代方法可以使用更少的代码来实现同样的效果：
.clearfix {overflow: hidden;
}
另外一种方法是利用display: flow-root;声明使元素自成一体：
.clearfix {display: flow-root;
}
flow-root可以创建一个新的块级格式化上下文，因此内部的浮动会被该元素包含，从而也能解决高度塌陷的问题。
二、CLEAR 属性的使用
清除单侧浮动
.clear-left {clear: left;
}
此类作用于元素上，当该元素之前有浮动到左侧的元素时，它会被推到下一行的最上面。
清除两侧浮动
.clear-both {clear: both;
}
当你想要确保元素下方没有任何浮动元素时，使用clear: both;将清除两侧的浮动。
三、CLEARFIX 与 CLEAR 选择使用场景
Clearfix适用场景
Clearfix主要用于容器元素包含所有浮动子元素的情况，它不需要额外HTML元素并且保持了较为干净的DOM结构。
Clear适用场景
Clear属性适用于随后的兄弟元素，希望它们位于浮动元素下方的情况。Clear是逐个元素处理浮动的，比较灵活。
四、浮动和清除浮动的原理
浮动的工作原理
浮动元素会脱离文档流，向左或向右移动，直到到达其容器边缘或另一个浮动元素。经常用于实现文字环绕图片等效果。
清除浮动的工作原理
clear属性实际上是在某元素的上方创建了一个看不见的边界，它会阻止自身与前方的浮动元素在同一水平线上显示，从而清除了浮动效应。
总而言之，正确使用CSS中的clearfix技巧和clear属性对于创建干净、可预测的布局是非常重要的。这能确保即使在复杂的布局中，元素也能如预期般地显示，提高网站的整体可用性和访问者的体验。
相关问答FAQs：
Q1: 是什么导致浮动问题，为什么要使用clearfix进行清除浮动？
A1: 当元素浮动时，它会从常规文档流中脱离，并且不再占据空间。这就导致了浮动元素周围的容器高度塌陷和布局问题。因此，为了解决这个问题，我们需要使用clearfix进行清除浮动。
Q2: clearfix 是如何工作的，如何应用它来清除浮动？
A2: 清除浮动的一种常用方法是使用clearfix类。通过在包含浮动元素的父级元素上应用clearfix类，可以防止父元素高度塌陷。同时，clearfix类还会在父元素的伪元素(:after)中添加一个空内容，并设置clear属性为both。这样，伪元素会占据父元素的位置，使父元素能够正确计算高度并包含浮动元素。
Q3: 还有其他方式可以清除浮动吗？
A3: 当然，除了使用clearfix类清除浮动，还有其他几种常见的方法。例如，可以使用clear属性来清除浮动。通过在浮动元素后面添加一个带有clear属性的空元素，可以阻止浮动元素影响后续元素的布局。另外，可以通过在父级元素上使用overflow属性为auto或hidden，这样可以创建一个新的块级格式化上下文，从而清除浮动。
注意：以上方法各有优劣，应根据具体情况选择适合的浮动清除方法。
TAG：clearfix
