阅读量:0
clear:both; 用于清除元素左右两侧的浮动，使后续内容正常显示在页面流中。在网页布局中，浮动（float）是一种常见的CSS布局技术，用于将元素从正常的文档流中取出，并使其向左或向右移动，虽然浮动可以创建出一些复杂的布局，但同时也会引起所谓的“浮动问题”，为了解决这些问题，开发者通常会使用clear:both;来清除浮动。
什么是浮动？
在CSS中，当一个元素被赋予float属性时，它会脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含块的内边框，其他的元素会围绕这个浮动的元素进行排列。
浮动带来的问题
1、父容器塌陷：当子元素全部浮动后，父容器的高度可能会变为0，因为父容器没有足够的内容来确定它的高度。
2、兄弟元素覆盖：后续的元素可能会与浮动元素重叠。
3、文字环绕可能会环绕在浮动元素的周围，这在某些情况下可能不是预期的效果。
clear:both的应用
clear:both;是CSS中的一个属性值，用于清除元素的左右两侧的浮动，当应用到某个元素上时，该元素会下降到浮动元素的下方，从而避免与浮动元素重叠。
如何应用clear:both
1、在父容器上应用：如果一个容器内部的所有子元素都浮动，可以在该容器的最后一个子元素上应用clear:both;，或者给父容器添加一个伪元素，设置clear:both;。
.container::after { content: ""; display: table; clear: both; }2、在需要清除浮动的元素上应用：如果某个元素需要出现在浮动元素的下方，可以直接在该元素上应用clear:both;。
.element { clear: both; }表格归纳
| 方法 | 应用场景 | CSS代码 |
| 在父容器上应用 | 所有子元素都浮动 | .container::after { content: ""; display: table; clear: both; } |
| 在需要清除浮动的元素上应用 | 某个元素需要出现在浮动元素的下方 | .element { clear: both; } |
FAQs
Q1: 为什么有时使用clear:both不起作用？
A1: 如果clear:both;没有按预期工作，可能是因为没有正确理解浮动的工作机制，或者是因为清除浮动的元素没有正确定位，确保清除浮动的元素是在浮动元素之后，并且在视觉上位于浮动元素的下方。
Q2: 除了clear:both，还有其他方法可以清除浮动吗？
A2: 是的，除了使用clear:both;之外，还可以使用以下方法来清除浮动：
使用overflow属性：给父容器设置overflow: hidden;可以清除内部的浮动。
使用flexbox或grid布局：现代CSS布局技术如flexbox和grid可以提供更灵活的布局方式，避免了传统浮动引起的问题。
使用伪元素：通过在父容器的伪元素上设置clear:both;也是一种常见的做法。
