容器 div 没有将背景颜色应用于其中的两个浮动 div答案

【问题标题】：container div not applyin background-color to the two floating divs inside it容器 div 没有将背景颜色应用于其中的两个浮动 div
【发布时间】：2013-08-04 22:10:58
【问题描述】：

我正在尝试将背景颜色应用于其中有两个浮动 div 的 div，但它没有应用它。容器内的两个 div 都被清除并像我希望的那样彼此并排显示，但整体背景颜色不适用

jsfiddle here

 <div class="contactformcontainer">
    <div class="maincontactform">
      <h4>SEND US A MAIL</h4>
      <form>
        <input type="text" placeholder="What is your name ?">
        <input type="text" placeholder="Email">
        <textarea type="text" placeholder="What is your message to us ?"></textarea> 
        <input type="submit" value="submit">
      </form>
    </div>
    <div class="maincontactdetails">
      <h4>Email : </h4><p>office@blah.org</p>
      <h4>Tel : </h4><p>(434)-5564-63443534</p>
      <h4>Address : </h4><p>blah blah blah.</p>
    </div>
    </div>

CSS

 .contactformcontainer{
width:100%;
background-color: green;
}

.maincontactform{
width: 47%;
padding: 24px;
float:left;
background-color: blue;
clear:both;
  }

 .maincontactdetails{
width: 40%;
padding: 24px;
background-color: red;
float:right;
}

【问题讨论】：

标签： css html css-float

【解决方案1】：

float: left;.contactformcontainer:)

.contactformcontainer{
  float: left;
  width:100%;
  background-color: green;
}

【讨论】：

【解决方案2】：

这里需要旧的 clearfix “hack”。要强制容器自行清除其子级，请为具有 contactformcontainer 类的 div 提供另一个 clearfix 类并添加这些样式

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html .clearfix { height: 1%; }
.clearfix { display: block; }

或者只是将外部容器浮动到左边，你的选择:)

【讨论】：

感谢您的回答。由于解释，投票了这个答案。

【解决方案3】：

添加position: absolute; 可能会解决您的问题。

见this fiddle。

【讨论】：