了解float以及如何以及何时在CSS3中浮动元素？

Question

我无法理解这个属性。 首先，我告诉你我对此有何了解。 我专注于<p>元素和id="amazing"这个主题。

现在我给它一个宽度

#amazing{
   width: 200px
}

结果是：

由于段落是一个块元素，所以没有元素会在它旁边向上移动，因为所有块元素在它们之前和之后都有换行符。

现在我把它浮起来：

#amazing{
       width: 200px;
       float: right
 }

我对这部分的理解：

（1）首先，浏览器照常在页面上流动元素，从文件顶部开始向底部移动
（2）当浏览器遇到浮动元素时，它会将它一直放在右边，它也会从流中移除段落，就像它漂浮在页面上一样

如果我错了，请纠正我，直到这里...... 接着，

带有CSS下拉菜单的浮动属性

考虑从网站上获取的这个片段：
包含列表项的无序列表 ，如下所示

             <ul id="menu">
                <li>
                    <a href="">Home</a>
                </li>
                <li>
                    <a href="">About Us</a>

                    <ul id="menu-about-us">
                        <li>
                            <a href="">The Team</a>
                        </li>
                        <li>
                            <a href="">History</a>
                        </li>
                        <li>
                            <a href="">Vision</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Products</a>
                    <ul>
                        <li>
                            <a href="">Cozy Couch</a>
                        </li>
                        <li>
                            <a href="">Great Table</a>
                        </li>
                        <li>
                            <a href="">Small Chair</a>
                        </li>
                        <li>
                            <a href="">Shiny Shelf</a>
                        </li>
                        <li>
                            <a href="">Invisible Nothing</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Conatct</a>
                    <ul>
                        <li>
                            <a href="">Online</a>
                        </li>
                        <li>
                            <a href="">Right Here</a>
                        </li>
                        <li>
                            <a href="">Somewhere Else</a>
                        </li>
                    </ul>
                </li>
            </ul>

现在如果我喜欢这个，

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    /*list-style: none;*/
}

ul li {
    display: block;      
    position: relative;
    float: left;
}
li ul {
    display: none;
}

对于ul li，不 显示：block 会使它们表现为块元素，但我将它们视为内联元素，如图所示。 浮动属性 在这里做了什么好事？

ul li {
        display: block;      
        position: relative;
        float: left;
}

我似乎太困惑了。请帮帮我... 如果有人在上下文中清除了 float 对块和内联元素的行为，那会更好。

Answer 1

这取决于场景以及你希望实现什么Shirgill。 我已经为你准备了JS Fiddle的快速比较 - ＆gt; http://jsfiddle.net/Lt7cftyc/

你是对的。设置display时列表的行为：inline-block;列表与float属性非常相似：

ul li {
display:inline-block;
}

的行为类似于：

ul li {
display:block;
float:left;
}

但存在一些差异。例如，您需要始终清除浮动元素以防止意外行为：

clear:both;

在下面的示例中，您可以看到内联和浮动菜单的不同方案。你可以使用它，看看当你为内联元素和浮动元素添加边距或填充时它会如何表现。你会很惊讶的。

ul.inline li {
 display:inline-block;
}

ul {
    font-size:14px;
    font-family: Arial;
    border: 1px solid black;
    background: lightblue;
    margin: 20px 0;
}

ul li {
    padding: 0 5px;
}

ul.floated2 {
    height: 20px;    
}

ul.floated li, ul.floated2 li {
    display:block;
    float:left;
}

.clr {
clear:both;
}

<p>This is example of inline list</p>
<ul class="inline">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu3</li>
</ul>
<br />
<p>This is example of floated list. Note that there is no backgroud - first difference!</p>
<ul class="floated">
    <li>menu floated 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

<br />
<p>This is example of floated list. The background is visible, but after I set height:20px;. </p>
<ul class="floated2">
    <li>menu floatedSecond Version 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>