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

我不能正确地看待这片土地。 首先，我告诉你关于这方面我有什么知识。 我将重点放在这个线程的

元素上

现在我给它一个宽度

#amazing{
   width: 200px
}

结果是：

因为段落是块元素，所以没有元素会在它旁边上移，因为所有块元素前后都有换行符

现在我把它浮起来：

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

我对这一部分的理解是：

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

如果我错了，请纠正我，直到这里……
其次,

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

考虑一下这个来自web的片段：
带有列表项的无序列表

             <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 li，不显示：block将使它们表现为块元素，但我将它们视为内联元素，如图所示。float属性在这里有什么好处

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

我似乎太困惑了。请帮帮我。。。

---

如果有人在上下文中明确这个概念，了解float如何处理块和内联元素，那就更好了。

这取决于场景和您希望实现的目标。 我已经为您准备了JS Fiddle的快速比较-->

你说得对。设置显示时列表的行为：内联块；使用float属性进行列表非常类似：

ul li {
display:inline-block;
}

其行为类似于：

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

但也有一些不同之处。例如，您需要始终清除浮动元素以防止意外行为：

clear:both;

在我下面的示例中，您可以看到内联菜单和浮动菜单的不同场景。你们可以玩它，看看当你们给内联元素和浮动元素添加边距或填充物时，它会如何表现。你会大吃一惊的

ul.inline li{
显示：内联块；
}
保险商实验室{
字体大小：14px；
字体系列：Arial；
边框：1px纯黑；
背景：浅蓝色；
利润率：20px0；
}
ulli{
填充：0 5px；
}
ul.d2{
高度：20px；
}
ul.浮动李，ul.浮动李{
显示：块；
浮动：左；
}
.clr{
明确：两者皆有；
}

这是内联列表的示例


菜单1
菜单2
菜单3



这是浮动列表的示例。请注意，没有背景优先的区别


菜单浮动1
菜单浮动2
菜单浮动3



这是浮动列表的示例。背景是可见的，但在我设置高度：20px；之后


菜单浮动第二版1
菜单浮动2
菜单浮动3

在上面所示的示例中，clear:两者的作用到底是什么？其次，在ui中，当您不设置其高度时，水平线显示为ui.floated元素的情况。请允许你扩展一点，你是对的，Shirgill，当我写这个例子时，我添加了“以防万一”这些div。我已经更新了这个示例。但我想告诉你什么时候你需要使用清楚：两者；因此，我准备了一个例子，并对其进行了评论。对不起，如果我误解了你，希望这个例子对你更清楚。好极了，迈克。所以，每当我使用float属性时，在它之后我需要清除它们，同时避免一个元素覆盖另一个元素。是的，在最后一个浮动元素之后插入clear元素。还有一件事，mike，我现在可以说，当我浮动块元素时，块元素的行为就像内联元素一样。

clear:both;