不显示内联的浮动元素

Question

我有这个 Fiddle，有 3 个浮动元素。我需要 "float" 元素显示在另一个元素之上，而不是并排显示，尽管它们是浮动的。

HTML结构：

<div class="main"></div>
<div class="float"></div>
<div class="float"></div>

CSS:

.main, .float {
  border: 1px solid;
  float: right;
  height: 50vh;
}

.main {
  width: 70%;
}

.float {
  width: 30%; // It won't break if it has 15%
}

已编辑：

忘记提及我无法在当前布局方案中将 "float" 元素嵌套在 30% 宽度 div 中。

Answer 1

不清楚您要做什么，但是从评论中...

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}
.main,
.float {
  border: 1px solid;
  float: right;
}
.main {
  width: 70%;
  height: 50vh;
}
.float {
  width: 30%;
  height: 25vh;
}

<div class="main">Main</div>
<div class="float">Float 1</div>
<div class="float">Float 2</div>

不显示内联的浮动元素

Floating element without displaying inline

html

css

css-float