什么CSS规则“明确：两者”呢？
下面的CSS规则是做什么的：
.clear { clear: both; } 为什么我们需要使用它？
我不会解释这些花车是如何在这里（详细地）工作的，因为这个问题通常集中在为什么要使用clear: both; 或者clear: both; 正好…
我会保持这个答案简单，并重点，并将graphics地解释为什么clear: both; 是必需的，或者它做什么…
一般来说，devise师将元素向左或向右浮动，在另一侧创build一个空的空间，从而允许其他元素占据剩余的空间。
为什么他们漂浮的元素？
当devise师需要两个块级元素并排时，元素会浮动。 比如说我们要devise一个基本的网站，其布局如下…
演示图像的实例 。
代码演示
/* CSS: */ * { /* Not related to floats / clear both, used it for demo purpose only */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } header, footer { border: 5px solid #000; height: 100px; } aside { float: left; width: 30%; border: 5px solid #000; height: 300px; } section { float: left; width: 70%; border: 5px solid #000; height: 300px; } .clear { clear: both; }
<!-- HTML --> <header> Header </header> <aside> Aside (Floated Left) </aside> <section> Content (Floated Left, Can Be Floated To Right As Well) </section> <!-- Clearing Floating Elements--> <div class="clear"></div> <footer> Footer </footer>
clear属性表示元素的左侧，右侧或两侧不能与相同块格式上下文中较早的浮动元素相邻。 清除的元素被推到相应的浮动元素下面。 例子：
clear: none; 元素保持与浮动元素相邻
body { font-family: monospace; background: #EEE; } .float-left { float: left; width: 60px; height: 60px; background: #CEF; } .float-right { float: right; width: 60px; height: 60px; background: #CEF; } .clear-none { clear: none; background: #FFF; }
<div class="float-left">float: left;</div> <div class="float-right">float: right;</div> <div class="clear-none">clear: none;</div>
CSS浮动和清除
样品小提琴
只要尝试删除clear:both从class与sample的div属性，看看它如何跟随浮动divs 。
Alien先生的回答是完美的，但无论如何，我不build议使用<div class="clear"></div>因为它只是一个让你的标记变脏的黑客。 这是无用的div在糟糕的结构和语义方面，这也使得你的代码不灵活。 在一些浏览器这个div会导致额外的高度，你必须添加height: 0; 哪个更糟。 但是，当你想在你的浮动元素周围添加背景或边框时，真正的麻烦就开始了，因为网页的devise很糟糕，它只会崩溃。 我build议将浮动元素包装到具有clearfix CSS规则的容器中。 这也是破解，但美丽，更灵活的使用和可读的人力和search引擎优化机器人。
当你想要一个元素放在底部的其他元素，你在CSS中使用这个代码。 它用于浮游物。
如果你漂浮的内容，你可以浮动左或右…所以在一个共同的布局，你可能有一个左导航，内容股利和页脚。
为了确保页脚在这两个浮动下面（如果你已经左右浮动），那么你可以把页脚clear: both
这样它将保持在两个花车之下。
（如果你只是清理左边，那么你只需要clear: left; ）
阅读本教程：
