Question

元素中心内容应根据其子元素调整其高度，但是如果我在其中一个孩子（例如元素leftContent）上使用float:left， leftContent将包含95％的正文以外的内容。由于中心内容高度不会调整以保持leftContent内部。

如果我从leftContent中删除float:left，则元素center-content将调整它的高度以将leftContent元素保留在其中。为什么float:left会这样做？

为了简化，我想要一个小盒子一个浮子，另一个浮子放在一个大盒子里面。这个大盒子应该相应地改变它的高度。

HTML

＆＃13;

#header, #footer, #content-wapper, section {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
#leftContent{
  display: inline-block;
  width: 49%;
  height: auto;
  float: left;
}

input{
  width: 98%;
  height: 40px;
  border: solid 1px gray;
  background-color: white;
}

.center-content {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2vw 0 2vw 0;
  background-color: #E8E8E8
}

＆＃13;

<section class="center-content">
    <div id="leftContent">
        <a><input name="income" type="text" id="income0" placeholder="Main Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income1" placeholder="Main Applicant Any-other Income"></a><br>
        <a><input name="income" type="text" id="income2" placeholder="Second Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income3" placeholder="Second Applicant Any-other Income"></a><br><br>
        <a><button class="btnCal" onclick="calculateMort()">Calculator</button></a>
    </div>
</section>

＆＃13;

Answer 1

你需要清除漂浮物。为此，有一个叫做clearfix的技巧。您也可以使用clear:both属性。

#header, #footer, #content-wapper, section {
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
}
#leftContent{
   display: inline-block;
   width: 49%;
   height: auto;
   float: left;
}

input{
   width: 98%;
   height: 40px;
   border: solid 1px gray;
   background-color: white;
}

.center-content {
   width: 960px;
   max-width: 100%;
   margin: 0 auto;
   padding: 2vw 0 2vw 0;
   background-color: #E8E8E8
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<section class="center-content">
    <div id="leftContent clearfix">
        <a><input name="income" type="text" id="income0" placeholder="Main Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income1" placeholder="Main Applicant Any-other Income"></a><br>
        <a><input name="income" type="text" id="income2" placeholder="Second Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income3" placeholder="Second Applicant Any-other Income"></a><br><br>
        <a><button class="btnCal" onclick="calculateMort()">Calculator</button></a>
    </div>
</section>

Answer 2

这是一个非常常见的问题，只需向您的父div添加一个clearfix：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 3

您需要清除浮动元素，以便您可以使用:after＆amp; :before与clear:both

。{

#header, #footer, #content-wapper, section {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
#leftContent{
  display: inline-block;
  width: 49%;
  height: auto;
  float: left;
}
.center-content:before, .center-content:after {
  content: "";
  clear: both;
  display: table;
}

input{
  width: 98%;
  height: 40px;
  border: solid 1px gray;
  background-color: white;
}

.center-content {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2vw 0 2vw 0;
  background-color: #E8E8E8
}

<section class="center-content">
    <div id="leftContent">
        <a><input name="income" type="text" id="income0" placeholder="Main Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income1" placeholder="Main Applicant Any-other Income"></a><br>
        <a><input name="income" type="text" id="income2" placeholder="Second Applicant Annual Income"></a><br>
        <a><input name="income" type="text" id="income3" placeholder="Second Applicant Any-other Income"></a><br><br>
        <a><button class="btnCal" onclick="calculateMort()">Calculator</button></a>
    </div>
</section>

如果子元素包含float：left，则父div不识别子高度

3 个答案: