为什么div不围绕它的孩子？

Question

当我申请

时，我在img内有p和两个div

div#column! {
  border: 1px solid red;
}

边框只显示为一行。为什么会这样？这是一个例子：http://jsfiddle.net/WZ8Gc/

Answer 1

因为您在段落上使用了float，而在容器上没有使用{{1}}。这是一个更新的小提琴。 http://jsfiddle.net/WZ8Gc/2/

Answer 2

    div#column_1 {
        border: 1px solid red;
        overflow : hidden;            
    }

或：

<div id="column_1"> 
... content ....
   <div style="clear : both;"></div>
</div>

Answer 3

P float有问题所以使用明确修复css可能会帮助你

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

Answer 4

在div＃column_1中给出高度，它会显示图像周围的所有边框。  div＃column_1 {border：1px solid red;高度：205px; }