html - 虚线没有包围预期的部分(最近的工作经历)——错在哪里？

Question

我不明白为什么“employmentFrame”div 的虚线边框没有像代码中较高位置的“frame”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

这是由于您的 inline float: left on the column，需要清除外部框内的 float ，以便进行布局。了解 clearfix hack https://www.w3schools.com/css/css_float.asp

这个问题也有其他的解决方案，使用 flexbox 代替 floats 或者在 floats 之后添加一个 DOM 元素并加上一个 clear: 都可以。

更新

最简单的解决方案如下:

<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>