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

Question

当我申请时，我在 a 中有一个img和一个两个psdiv

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

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

Answer 1

因为您float在段落上使用了，而不是在容器上使用。这是一个更新的小提琴。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

像这样在 div#column_1 中给出高度，它会显示图像周围的所有边框。div#column_1 { 边框：1px 纯红色；高度：205px；}

Answer 4

Pfloat是问题所以使用 Clear fix css 可能会帮助你

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