了解浮动以及如何以及何时浮动 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，display: block 不会使它们表现为块元素，但我将它们视为内联元素如图所示。 float 属性这里有什么好用的？

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

我好像太迷茫了。请帮帮我... 如果有人在 float 将如何与 block 和 inline 一起运行的上下文中清除这个概念会更好元素。

Answer 1

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

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

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>

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

Understanding float and how and when to float an element in CSS3?

css

css-float