CSS规则是什么；清楚：两者都是“；做

以下CSS规则的作用是什么：

.clear { clear: both; }

---

为什么我们需要使用它呢？

当你想把一个元素放在另一个元素的底部时，你可以在CSS中使用这段代码。 它用于浮球

如果浮动内容，则可以向左或向右浮动。。。因此，在一个常见的布局中，您可能有一个左导航、一个内容div和一个页脚

为了确保页脚保持在这两个浮动的下方（如果已向左和向右浮动），请将页脚设置为

clear:all

这样，它将保持在两个浮动下方

（如果只清除左侧，则只需

清除：左侧；

）

---

浏览本教程：

我不会在这里详细解释浮动是如何工作的，因为这个问题通常集中在为什么要使用

clear:both或
清除的内容：两者确切地做

我将保持这个答案的简单性和针对性，并将以图形方式向您解释为什么
清晰：两者都清楚是必需的或它的作用

通常，设计师将元素向左或向右浮动，从而在另一侧创建一个空白空间，允许其他元素占用剩余空间

为什么它们会浮动元素？
当设计器需要2个并排的块级元素时，元素将浮动。例如，我们想设计一个基本的网站，其布局如下


演示图像的一部分

演示代码


/*CSS:*/
*{/*与浮动无关/两者都清除，仅用于演示目的*/
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
页眉、页脚{
边框：5px实心#000；
高度：100px；
}
旁白{
浮动：左；
宽度：30%；
边框：5px实心#000；
高度：300px；
}
部分{
浮动：左；
宽度：70%；
边框：5px实心#000；
高度：300px；
}
.清楚{
明确：两者皆有；
}

标题
靠边（向左浮动）
内容（向左浮动，也可以向右浮动）
页脚


只要试着删除
clear:with
class
sample
从
div
中删除
属性，看看浮动
divs
Alien先生的答案是完美的，但无论如何，我不建议使用
，因为这只是一个让你的标记变脏的黑客行为。就糟糕的结构和语义而言，这是无用的空
div
，这也使您的代码不灵活。在某些浏览器中，此div会导致额外的高度，您必须添加
height:0哪一个更糟糕。但真正的麻烦是当你想在你的浮动元素周围添加背景或边框的时候——它会崩溃，因为。我建议将浮动元素包装到具有CSS规则的容器中。这也是hack，但很漂亮，使用更灵活，可读性更强，适合人类和SEO机器人
 该属性表示元素的左侧、右侧或两侧不能与同一块格式上下文中先前浮动的元素相邻。清除的图元被推到相应浮动图元的下方。示例：

清除：无元素保持与浮动元素相邻

正文{
字体系列：monospace；
背景：#EEE；
}
.向左浮动{
浮动：左；
宽度：60px；
高度：60px；
背景：CEF；
}
.向右浮动{
浮动：对；
宽度：60px；
高度：60px；
背景：CEF；
}
1.一无所获{
明确：无；
背景：#FFF；
}
float：左；
浮动：对；
明确：无
当您使用CSS
float
并希望下一个元素位于下方，而不是右侧或左侧时。当指定元素与clear:both一起使用时，不允许在指定元素的左侧和右侧使用浮动元素。如果您从未听说过浮动，我建议您首先阅读浮动的介绍——例如，请参阅下一个答案中的链接。然后回来读这个答案——它会有意义的。请注意，浮动最初不是为了有两个块级元素并排而发明的，这只是副作用！最初的目的是允许文本以内联方式围绕图像流动，因此您可以将图像向任意方向浮动。阅读本文之前，请参考相关简短答案，以获得大致的想法@外星人先生，这些“虫子”让我远离浮子。我像埃博拉一样避开它们。也许你能帮我一劳永逸地解决浮动问题。@Carlo：例如，在Twitter Bootstrap等模板中经常使用的一种替代方法；将
display:inline block
放在一个元素上，在父元素上可以使用
text align:left
、
text align:center
或
text align:right
等。这篇文章有更多关于
clearfix
的详细信息。这是最好的答案。我想知道为什么另一个答案被接受。如果我们删除
display:inline块此场景中的css属性？它将把
内联块
父元素拉伸到其具有类
左浮动
的同级元素。这使得“清除不影响当前块格式上下文之外的浮动”语句错误。有人能解释一下吗？@SashrikaWaidyarathna：父元素不一定会为其子元素生成一个。在您的示例中，（a）删除
display:inline block
意味着它不再生成块格式上下文（b）该元素内的浮动/清除和第一个浮动都成为同一块格式上下文（视口）的一部分。@SalmanA，感谢您对css规范的解释。我不知道块格式上下文的定义。Sundar Pichai doppelganger？什么教程？