javascript - HTML 元素不会在两个相邻 float 的 div 下

Question

我有一个包含 3 个元素的页面，第一个和第二个紧挨着 float ，但第三个没有 float 并且宽度为 80%。出于某种原因，即使我添加了 float:none;

，它也会随之上升

这是我的代码:

<div class="elem1">

</div>
<div class="elem2">

</div>
<div class="elem3">

</div>

CSS:

.elem1{
  width:40%;
  height:200px;
  float:left;
  background:#f00;
}
.elem2{
  width:40%;
  height:200px;
  float:right;
  background:#ff0;
}

.elem3{
  width:80%;
  height:200px;
  background:#f0f;
  margin:auto;
  float:none;
}

这是一个链接:https://jsfiddle.net/woa0hvj9/

Answer 1

尝试清除 float 。 New fiddle here .

.elem3{
  clear: both;
  width:80%;
  height:200px;
  background:#f0f;
  margin:auto;
}