以下CSS规则是做什么的：

.clear { clear: both; }

为什么我们需要使用它？

---

我不会在这里详细解释花车是如何工作的，因为这个问题通常集中在为什么使用clear: both; 或者clear: both; 准确地做...

我会保持这个答案简单，并重点，并将图形地解释为什么clear: both; 是必需的或它的作用...

通常，设计师将元素向左或向右移动，从而在另一侧创建空的空间，从而允许其他元素占据剩余的空间。

为什么他们会浮动元素？

设计师需要并排放置两个块级元素时，元素会浮动。 比如说我们想要设计一个基本的网站，其布局如下...

演示图像的实时示例 。

代码演示

/*  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 。

链接地址: http://www.djcxy.com/p/87617.html

上一篇: What does the CSS rule "clear: both" do?

下一篇: Using percent for font size?