Question

<div class="one">aaaaaaaaaa </div>
<div class="one">bbbbbbbbbb </div>
<div class="one">ccccccccccc </div>
<span style="clear: both">
    THIS SHOULD BE BELOW TABLE. WHY NOT?

.one {
  background-color: red;
  float: left;
}

http://jsfiddle.net/bLsju/2/

为什么这个例子仍然是浮动的？我怎样才能使用clear：both？

Answer 1

如果元素不是块元素，则忽略clear属性。在跨度上使用style="display: block"或使用div，这是一个块元素。

Answer 2

将span更改为div。它将适用于块元素。

Answer 3

清除仅适用于具有显示类型块的元素。添加display: block;以使其按预期工作。

Answer 4

使用div而不是span，因为span是内联元素。您可以为块元素写清楚。

http://jsfiddle.net/bLsju/2/

Answer 5

你可以查看这个DEMO，它可能对你有所帮助。使用DIV而不是span。

Answer 6

 <div style="clear: both">&nbsp;</div>

而不是span，因为它的内联元素

Answer 7

问题是跨度不是块元素。要么阻止它。通过使用＆＃34; display：block＆＃34;作为样式属性

或者您可以使用div而不是span

请参阅以下两个链接：

jsfiddle.net/bLsju/7 /

jsfiddle.net/wmT9w /

你很容易理解。

Answer 8

使用div。如果你坚持跨度做：

package  
{
    import flash.display.*;
    import flash.events.*;

    public class MenuNavigation extends MovieClip 
    {

        public function MenuNavigation() 
        {
            // constructor code
        }

        // function deals with button navigation handling between frames
        public static function loadScreen(evt:MouseEvent)
        {
           switch(evt.target.name)
            {
                case "playButton":
                    gotoAndStop("aboutGame");
                break;
                case "creditsButton":
                    gotoAndStop("credits");
                break;
                case "aboutNextButton":
                    gotoAndStop("instructions");
                break;
                case "aboutBackButton":
                    gotoAndStop("mainMenu");
                break;
                case "instructionsBackButton":
                    gotoAndStop("aboutGame");
                break;
                case "instructionsPlayButton":
                    gotoAndStop("game");
                break;
                case "creditsBackButton":
                    gotoAndStop("mainMenu");
                break;
            }
        }
    }
}

Answer 9

clear：两者都使元素下降到文档中前面的任何浮动元素之下。

副本：What is the use of style="clear:both"?

如何使用清楚：两者？

9 个答案: