Question

我对CSS很新，所以，这可能看起来很傻：

在CSS中，我使用属性float:left将内容放置到相邻元素，现在，我有一个容器，用于所有具有float属性的元素。如何让父母元素根据它的内容调整它的高度？

HTML：

<div id="page">
<div id="side">
    <p>my sidebar</p>
</div>
<div id="content">
    <p>my content</p>
    <p>my content1</p>
    <p>my content2</p>
    <p>my content3</p>
</div>

CSS

/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{

border:3px solid #000;
float:left;
}
#content{
float:left;
 border:3px solid #000;
}

使用上面的内容，<div id="page">看起来它的高度为0px ....我如何让它变形内容？

因为我是CSS的新手，请解释我做错了什么，谢谢

小提琴：http://jsfiddle.net/AuSmP/

Answer 1

您可以为overflow:hidden添加div #page，以允许其调整大小以适合其内容。

<强> See Working Demo.

<强> Learn more about overflow property.

或者您也可以添加<div class="clear"></div>，然后添加CSS .clear{clear:both;}来实现相同目标。

<强> See Demo.

Answer 2

将位置从相对位置更改为绝对位置也可以帮助您解决问题请检查此JSFiddle Demo

Answer 3

这是你所期望的吗？ http://jsfiddle.net/AuSmP/4/ 只需将float：left样式添加到#page将修复该技巧，或者您也可以使用clear：两者都在底部

CSS浮动属性显示没有高度？

3 个答案: