参见英文答案 >
Floating elements within a div,floats outside of div. Why?9个
我有以下HTML,我想在按钮和文本后面显示蓝色背景.不幸的是,使用以下代码,蓝色背景消失.如果我删除了ids按钮和文本的CSS,则背景会回来.
我有以下HTML,我想在按钮和文本后面显示蓝色背景.不幸的是,使用以下代码,蓝色背景消失.如果我删除了ids按钮和文本的CSS,则背景会回来.
我究竟做错了什么？
谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style>
#actions
{
background: blue;
}
#buttons
{
float: left;
}
#text
{
float: right;
}
</style>
</head>
<body>
<div id="actions">
<div id="buttons">
<input type="button" id="btnOne" value="Bla bla" />
<input type="button" id="btnTwo" value="Bla bla bls" />
</div>
<div id="text">Bla bla bla</div>
</div>
</body>
</html>
解决方法
你必须“清除”你的花车.浮动元素将它们从页面的正常块定位中取出,因此右侧浮动的元素会突破父容器,从而折叠div.您可以清除它们,或者更简洁明智的方法是将’overflow：auto’添加到父容器中：
#actions
{
background: blue; overflow: auto;
}
#buttons
{
float: left;
overflow: hidden;
}
#text
{
float: right;
overflow: hidden;
}
由于“overflow：auto”可以在某些情况下生成滚动条,因此我通常通过在children元素上指定’overflow：hidden’来明确地阻止它.这在我的经验中可靠地工作.