虚线没有包裹预期的部分(最近的就业历史) - 错是哪里

Question

我无法弄清楚为什么"雇用框架"的虚线边框不像" frame"div the ofer ofers offormentframe'div笼罩着内部内容。据我所知，我以相同的方式对其进行了编码，不同的是，在一个正在起作用的嵌套。也许我错了。无论如何，我只是看不到它。谁能告诉我此代码有什么问题？

编辑：因此，"个人详细信息"下面的虚线与我想要的完全一样。问题在于"最近的就业历史"下的虚线。目前显示为水平线，但应该围绕它下面的信息进行。

body {
  font-family: Cambria, Georgia, serif;
  background-color: black;
}
h1 {
  font-size: 2.5vw;
  color: rgb(54, 95, 145);
}
h2 {
  font-size: 1.5vw;
  margin: 0;
}
.mainBox {
  width: 90vw;
  margin: auto;
  background-color: white;
}
.margin {
  height: 5vw;
}
.contentBox {
  width: 80vw;
  margin: auto;
  overflow: auto;
}
.horizontalLine {
  width: 100%;
  height: 0.5vw;
  background-color: rgb(184, 204, 228);
  clear: both;
}
.horizontalEmpty {
  width: 100%;
  height: 1.5vw;
  clear: both;
}
.column {
  width: 49%;
}
.sectionTitle {
  height: 1.9vw;
  background-color: rgb(184, 204, 228);
  padding-left: 1vw;
}
.sectionEmpty {
  width: 100%;
  height: 0.75vw;
  clear: both;
}
.frame {
  border-style: dotted;
  border-color: rgb(184, 204, 228);
  border-width: 1px;
  width: 99.7%;
  clear: both;
}
.frameContent {
  width: 95%;
  margin: auto;
}
.employmentFrame {
  border-style: dotted;
  border-color: rgb(184, 204, 228);
  border-width: 1px;
  padding-left: 1vw;
  clear: both;
}
.employmentFrameContent {
  width: 100%;
  margin: auto;
}
.row {
  height: 2vw;
}
.property {
  width: 30%;
  font-size: 1.3vw;
  font-weight: bold;
  color: rgb(54, 95, 145);
  float: left;
}
.value {
  width: 70%;
  font-size: 1.3vw;
  font-weight: bold;
  float: left;
}

<div class="mainBox">
  <div class="margin"></div>
  <div class="contentBox">
    <div id="title" style="text-align: center; height: 3.5vw">
      <h1>Curriculum Vitae</h1>
    </div>
    <div class="horizontalLine"></div>
    <div class="horizontalEmpty"></div>
    <div class="column" style="float: left">
      <div class="sectionTitle">
        <h2>Personal details</h2>
      </div>
      <div class="sectionEmpty"></div>
      <div class="frame">
        <div class="frameContent">
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Full name</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="row">
            <div class="property">Nationality</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="row">
            <div class="property">Date of birth</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Street name</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="row">
            <div class="property">City</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="row">
            <div class="property">Post code</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Email</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="row">
            <div class="property">Mobile</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
        </div>
      </div>
    </div>
    <div class="column" style="float: right">
      <div class="sectionTitle">
        <h2>Lorem ipsum</h2>
      </div>
      <div class="sectionEmpty"></div>
      <div class="frame">
        <div class="frameContent">
          <div class="sectionEmpty"></div>
          <div class="row">
          </div>
        </div>
      </div>
    </div>
    <div class="horizontalEmpty"></div>
    <div class="sectionTitle">
      <h2>Recent employment history</h2>
    </div>
    <div class="sectionEmpty"></div>
    <div class="employmentFrame">
      <div class="employmentFrameContent">
        <div class="column" style="float:left">
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Period</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Title</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Company</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Address</div>
            <div class="value">Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Telephone</div>
            <div class="value">Dolor sit amet</div>
          </div>
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Manager</div>
            <div class="value">Dolor sit amet</div>
          </div>
        </div>
        <div class="column" style="float:right">
          <div class="sectionEmpty"></div>
          <div class="row">
            <div class="property">Details</div>
          </div>
          <div class="sectionEmpty"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="margin"></div>
</div>

Answer 1

它是由于您的直列浮点：左列在列上，外部框需要清除内部的浮子以进行布局。阅读有关clearfix hack https://www.w3schools.com/css/css_float.asp

的了解

此问题也有其他解决方案，使用flexbox代替浮子，或在浮子上添加一个透明的dom元素：两者都在其上。

更新

最简单的解决方案如下：

<div class="employmentFrameContent">
    <div class="column" style="float:left">
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Period</div>
        <div class="value">Dolor sit amet</div>
      </div>
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Title</div>
        <div class="value">Dolor sit amet</div>
      </div>
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Company</div>
        <div class="value">Dolor sit amet</div>
      </div>
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Address</div>
        <div class="value">Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet</div>
      </div>
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Telephone</div>
        <div class="value">Dolor sit amet</div>
      </div>
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Manager</div>
        <div class="value">Dolor sit amet</div>
      </div>
    </div>
    <div class="column" style="float:right">
      <div class="sectionEmpty"></div>
      <div class="row">
        <div class="property">Details</div>
      </div>
      <div class="sectionEmpty"></div>
    </div>
    <div style="clear: both;"></div>
</div>