主分部背景颜色没有出现在分Div

Question

我有一个问题。我给了三个DIV。首先是主要的，另外两个是小孩。 在两个孩子中，一个孩子是左侧，一个孩子是右侧。 我给了主要的div背景颜色为白色，但它没有出现在两个孩子的背景颜色上。

简单，我想主div背景颜色应该出现在子div上，只要主div接近即可。下面是我的代码

<div style="background-color:#FFFFFF;"> 
Its showing here only white color 

<div style="width:250px; float:left; padding:10px;"> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
</div> 

<div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
</div> 

</div> 

</body> 

Answer 1

你需要清除浮动。

浮点数后面加上这一行就可以解决问题。

<div style="clear: both;"></div> 

新的HTML：

<div style="background-color:#FFFFFF;">Its showing here only white color 
    <div style="width:250px; float:left; padding:10px;"> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
    </div> 
    <div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

Demo Here

了解更多关于花车和清除它们here。

---

你也可以使用溢出，我只需要使用clear: both;。

Demo Using Overflow Here

注：我已经做了内嵌样式来满足你的代码

Answer 2

可以节省开支一个div过，你有两种可能性：

1. 添加溢出：隐藏于母公司div（带背景颜色）

结果html：

<div style="background-color:#FFFFFF; overflow:hidden"> 
    Its showing here only white color 
    <div style="width:250px; float:left; padding:10px;"> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
    </div> 
    <div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
    </div> 
</div> 

结果Jsfiddle

或者你可以添加一个 “clearfix” 类 - - 更多的.cf短

 /** 
    * For modern browsers 
    * 1. The space content is one way to avoid an Opera bug when the 
    * contenteditable attribute is included anywhere else in the document. 
    * Otherwise it causes space to appear at the top and bottom of elements 
    * that are clearfixed. 
    * 2. The use of `table` rather than `block` is only necessary if using 
    * `:before` to contain the top-margins of child elements. 
    */ 
    .cf:before, 
    .cf:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .cf:after { 
     clear: both; 
    } 

    /** 
    * For IE 6/7 only 
    * Include this rule to trigger hasLayout and contain floats. 
    */ 
    .cf { 
     *zoom: 1; 
    } 

解释here

而你只添加CF类主DIV 。