0

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

我的想法是，这种行为的原因是，在这种情况下，当您
向左浮动和向右浮动时，中间的空间是可用的可用空间，据我所知，第二行利用这就是原因。左右浮动的元素只会占用它们需要的空间，它们被认为是块元素。

如果我删除对 clear:both 的评论；在选择器#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
4

2 回答 2

0

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

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

于 2013-08-20T09:42:58.580 回答
0 
#container{
    overflow:auto;
}

或者

#message{
    clear: both;
}

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

于 2013-08-20T09:36:42.600 回答