Question

为什么带有选择器#message的第二行在相对的浮点数之间滑动。

我的想法，这种行为的原因是，当你在这种情况下浮动一到中左侧和右侧之间的空间是第二排的空闲可用空间根据我的知识，利用这是共鸣。左右浮动的元素只占用他们需要的空间它们被认为是块元素。

如果我删除明确的评论：两者;在选择器#message然后它工作，那是
因为您要求#message元素说明不允许此元素介于两者之间一个漂浮的元素。

我只想与你确认我的理解是否正确。

<!DOCTYPE html>
    <html>
        <head>
            <title>Testing</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css" media="screen">
                 body 
                 {
                 margin: 0;
                 padding: 0;
                 font-family: Arial, sans-serif;
                 font-size: small;
                 text-align: center;
                 width:768px;
                 }

                 #register  
                 {
                     margin: 0;
                     padding: 0;
                     list-style: none;
                     background: yellow;    
                 }

                 #reg 
                 {
                 float: left;
                 margin: 0;
                 padding: 8px 14px;
                 background:red;
                 }

                 #find  
                 {
                  float: right;
                  margin: 0;
                  padding: 8px 14px;
                  background:blue;
                 } 

                 #message 
                 {
                    /*clear:both;*/
                    text-align: center;
                    background: #92B91C;
                 }
             </style>
        </head>

        <body>
            <div id="container">
                <ul id="register">
                <li id="reg">Not registered? <a href="#">Register</a> now!</li>
                <li id="find"><a href="#">Find a store</a></li>
            </ul>

            <div id="message">
                <p><strong>Special this week:</strong> $2 shipping on all orders! <a 
                        href="#">LEARN MORE</a></p>
            </div>
            </div>
        </body>
    </html>

//Tony

Answer 1

#container{
    overflow:auto;
}

或

#message{
    clear: both;
}

这是清除浮子的两种不同技术。消息位于两个浮点数之间的唯一原因是因为可用空间允许下一个元素占用空白空间 - 因为浮动已从文档流中删除。为了让事情恢复正常，你必须清理你的花车。

Answer 2

这是工作小提琴：http://jsfiddle.net/hWgED/1/

在您的代码中，只需要取消注释#message id - ＆gt; clear:both

为什么我的第二排被放置在两个相对的浮子之间

2 个答案: