如果子元素包含浮动元素，则父div无法识别子元素的高度：left

Question

元素中心内容应该根据其子元素调整其高度，但是如果我在其某个子元素上使用了float:left，例如元素leftContent，leftContent将在其中心内容之外包含95％的身体。由于中心内容高度不会调整以保持其内部的左内容。

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

为了简化，我想让两个小盒子在一个大盒子里留下另一个浮子。这个大盒子应该相应地改变其高度。

HTML

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

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

Answer 1

你需要清除浮动元素，使您可以使用:after & :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>

Answer 2

需要清除浮动。为此，有一个叫做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 3

这是一个非常普遍的问题，只是一个clearfix添加到您的父DIV：

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