为什么子 div 没有进入父 div 的边界？

Question

我有一个非常简单的 HTML/CSS 代码，它有父 div pageWrapper，里面有 header、rightPanel。我有 pageWrapper 的边界，所以 header 和 rightPanel 都应该显示在边界内。

当我在 Visual Studio 设计器 window 中看到 HTML 渲染时，它显示正确的输出，rightPanel 确实位于边框下方。但是在 IE/Chrome/Firefox 中，rightPanel 没有进入 pageWrapper 的边界。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #pageWrapper {
            font: 14px/11.4;
            width: 1000px;
            background-color: #FFF;
            margin-left: auto;
            margin-right: auto;
          border: 5px solid black;
        }

        #header {
            height: 127px;
            width: 1000px;
        }

        #logo {
            position: relative;
            left: 15px;
            top: 4px;
        }

        #blogSlogan {
            position: relative;
            width: 270px;
            left: 685px;
            top: -125px;
        }

        #searchBox {
            position: relative;
            left: 685px;
            top: -70px;
            width: 290px;
        }

        #rightPanel {
            position:relative;
            background-color: red;
            height: 600px;
            width: 500px;
            float: right;
        }
    </style>
</head>
<body>
    <div id="pageWrapper">

        <div id="header">
            <img src="Images/linkedin.jpg" alt="Social voice logo"
                height="109px" id="logo" />
            <p id="blogSlogan">Your source for mobile/media marketing.</p>
            <div id="searchBox">
                <input type="text" name="search" size="25" value="Search" />
                <input type="submit" value="SEARCH" />
            </div>
        </div>
        <!-- End header-->

        <div id="rightPanel">

        </div>
        <!-- End rightPanel-->
    </div>
    <!-- End pageWrapper-->

</body>
</html>

Answer 1

那是因为您已经浮动了右侧面板，但它之后没有任何内容可以清除浮动。

我会考虑阅读更多关于 using floats 的内容。

您需要添加以下内容：

 #pageWrapper:after {
     clear: both;
     content: " ";
     display: block;
     visibility: hidden; 
     height: 0; 
 }

或者如果您需要支持低于 IE8 的版本（不支持 :after），那么您需要在浮动元素之后添加一个额外的 div 并确保它具有CSSclear: both;

DEMO

Answer 2

你的问题的答案很简单。您将 float:right 应用于红色 div，但其容器并未浮动。根据框模型规范，这会生成您看到的行为。

您应该花些时间了解盒子模型的工作原理，position 和 float 的不同值如何影响您的风格，因为我看到您使用了一些 position:relative 并且它实际上看 html 和 css.

的其余部分没有任何意义

Answer 3

如果您将 #rightpanel float CSS 属性设置为 right 它将被拉出 HTML 流。您需要在 #pageWrapper 末尾添加一个元素 CSS 属性 clear: both 以便它使主 div 延伸到所有浮动的点元素结束。使用 CSS 执行此操作的更简洁方法是将此行添加到您的 CSS:

#pageWrapper:after {
  content: “ ";
  display: block;
  clear: both;
}

Answer 4

只需将 overflow:hidden 属性添加到父级 div 你就会得到答案谢谢

Answer 5

将右侧面板从向右浮动改为right:500px；会工作

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dd</title>
    <style type="text/css">
        #pageWrapper {
            font: 14px/11.4;
            width: 1000px;

            background-color: #FFF;
            margin-left: auto;
            margin-right: auto;
          border: 5px solid black;
        }

        #header {
            height: 127px;
            width: 1000px;
        }

        #logo {
            position: relative;
            left: 15px;
            top: 4px;
        }

        #blogSlogan {
            position: relative;
            width: 270px;
            left: 685px;
            top: -125px;
        }

        #searchBox {
            position: relative;
            left: 685px;
            top: -70px;
            width: 290px;
        }

        #rightPanel {
            position:relative;
            background-color: red;
            height: 600px;
            width: 500px;
            right:-500px;

        }
    </style>
</head>
<body>
    <div id="pageWrapper">

        <div id="header">
            <img src="Images/linkedin.jpg" alt="Social voice logo"
                height="109px" id="logo" />
            <p id="blogSlogan">Your source for mobile/media marketing.</p>
            <div id="searchBox">
                <input type="text" name="search" size="25" value="Search" />
                <input type="submit" value="SEARCH" />
            </div>
        </div>
        <!-- End header-->

        <div id="rightPanel">

        </div>
        <!-- End rightPanel-->
    </div>


</body>

Answer 6

我已经更新了你的html和css

<body>
<div id="pageWrapper">
    <div class="secondWrapper">
    <div id="header">
        <img src="Images/linkedin.jpg" alt="Social voice logo"
            height="109px" id="logo" />
        <p id="blogSlogan">Your source for mobile/media marketing.</p>
        <div id="searchBox">
            <input type="text" name="search" size="25" value="Search" />
            <input type="submit" value="SEARCH" />
        </div>
    </div>
    <!-- End header-->

    <div id="rightPanel">

    </div>
    <!-- End rightPanel-->
    </div> <!-- End secondwrapper-->
</div>
<!-- End pageWrapper-->

</body>

我所做的是在 pagewrapper 中包含另一个包装器并给定 float 和 border

这里是css

    #pageWrapper {
        font: 14px/11.4;
        width: 1000px;
        background-color: #FFF;
        margin-left: auto;
        margin-right: auto;


    }
 .secondWrapper{
    float:left;
    border: 5px solid black;
    width:100%:

 }

    #header {
        height: 127px;
        width: 1000px;
        float:left;
    }

    #logo {
        float:left;
        margin:10px 0 0 10px;
    }

    #blogSlogan {
       float:right;
        width: 270px;

    }

    #searchBox {
        float:right;
        clear:right;

    }

    #rightPanel {
        background-color: red;
        height: 600px;
        width: 500px;
        float: right;
    }

为什么子 div 没有进入父 div 的边界？

Why child div is not coming in boundary of parent div?

html

css

layout