Question

当使用下面的代码时，我希望标题，登录和注册在标题div中，但是只有标题似乎是，我很确定它是浮动：正确导致问题，因为它的工作原理当我删除它时很好。

<div id="container" style="width:100%">
    <div id="header" style="background-color:#FFA500;padding:0;width:100%;">
        <h1 style="margin-bottom:0;">Title</h1>
        <p style="float:right;padding:5px;">login</p>
        <p style="float:right;padding:5px;">sign up</p>
    </div>
</div>

有人可以解释为什么会这样，也许可以建议我如何纠正它？

感谢

Answer 1

h1是display:inline; h1的阻止元素。

小提琴 - http://jsfiddle.net/JBK4k/

Answer 2

你遇到这个问题是因为：

h1具有display:block默认样式，可以征服整个宽度。
在子容器中，您只需为float申请p，而不是h1。

请参阅，如果您将float:left分配给h1，您将获得所需的结果。这是因为它已经浮动到左边，右边的剩余空间将被带有样式float:right

所以编辑后的代码将是：

<div id="container" style="width:100%;">
    <div id="header" style="background-color:#FFA500;padding:0;overflow:hidden;">
        <h1 style="float:left;margin-bottom:0;">Title</h1>
        <p style="float:right;padding:5px;">login</p>
        <p style="float:right;padding:5px;">sign up</p>
    </div>
</div>

p / s：不要忘记将overflow:hidden;添加到#header以清除花车。

Answer 3

为了解释发生了什么，当你“浮动”某些东西时，你基本上将它从文档流中拉出来，这样包含的div＃header就会崩溃到最后一个非浮动元素。有几种方法可以“清除浮动”，以便父容器完全包含浮动元素。您可以如上所述浮动父容器（浮动元素将包含浮动元素），或者您可以添加overflow：hidden到容器（我这么做很多），或者您可以使用“简单明确”方法，这可能是这些天最受欢迎。如果您搜索“清除浮动元素”，您可能会看到更深入的解释。

Answer 4

如果你给父母一个预期的高度，你不需要担心花车。尝试将一些高度添加到float elament的父元素

身高：30px; //给出你想要的任何身高

<div id="container" style="width:100%">
   <div id="header" style="background-color:#FFA500;padding:0;width:100%; height:30px;">
      <h1 style="margin-bottom:0;">Title</h1>
      <p style="float:right;padding:5px;">login</p>
      <p style="float:right;padding:5px;">sign up</p>
   </div>
</div>

或你应该清除浮子。试试这个

clear：both; //或者 clear：right 以仅清除float：right或者给予 clear：left 以仅清除float：right

<div id="container" style="width:100%"> <div id="header" style="background-color:#FFA500;padding:0;width:100%"> <h1 style="margin-bottom:0;">Title</h1> <p style="float:right;padding:5px;">login</p> <p style="float:right;padding:5px;">sign up</p> <div style="clear:both"></div> </div> </div>

Answer 5

你需要明确浮动，试试这个：

#header:after,
#hader:before{
   content:"";
   display: table;
}
#header:after{
   clear:both;
   overflow: hidden;
}
#header {
  zoom: 1;/*for ie6*/
}

其他解决方案，请点击here。

CSS浮动导致段落被移动

5 个答案: