css – 为什么我的float元素不在其父元素中

前端之家收集整理的这篇文章主要介绍了css – 为什么我的float元素不在其父元素中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以基本上我有这个包装div,它里面的所有元素都是浮动元素.唯一的事情是包装器div的边界不包括浮动元素.例:
<div id = "wrapper>
   <div id = "content"></div>
</div>

继承人css:

#wrapper
{
   width:         1000px;
   margin-left:   auto;
   margin-right:  auto;
   border:        1px solid;
} 

#content
{
   border:        1px solid;
   width:         850px;
   height:        400px;
   display:       block;
   float:         left;
}

基本上#content不包含在#wrapper的边框内,但仍然在其中对齐,为什么会这样?

解决方法

你需要“清除”容器div.

在计算容器的尺寸时不考虑浮动元素,但是有几种解决方法可以获得您想要的东西.

最简单的

只需添加像这样的div作为容器div中的最后一个子节点:

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

正如@Pekka评论,在这个SO问题中列出了许多其他方法来实现这种效果(没有额外的标记):

What methods of ‘clearfix’ can I use?

猜你在找的CSS相关文章