Question

有人可以从a w3school example解释以下代码吗？

<html>
  <head>
    <style>
      ul {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
      }
      a:hover {
        background-color:#ff3300;
      }
      li {
        display:inline;
      }
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>

    <p>In the example above, we let the ul element and the a element float to the left.
       The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
       The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
       We add some colors and borders to make it more fancy.
    </p>
  </body>
</html>

当我删除应用于float:left;元素的<ul>（第5行）时，<p>标记内的文字就会移到列表的右侧。

但是，float:left在这做什么？从结果来看，应用后，<p>元素之后的<ul>标记开始换行。有人可以解释一下吗？

Answer 1

这被称为“伟大的崩溃” - 如果父元素只包含浮动元素，它的高度就会崩溃为零。

在上面的代码中，所有a标记都已向左浮动，这会将li元素折叠为空，而这些元素又会折叠父ul元素。这会导致以下p标记自行换行并在最后一个链接之后开始。

从float:left;代码中移除a，您会看到差异。

来源：http://css-tricks.com/all-about-floats/

Answer 2

首先请不要w3schools.com。他们遇到了一些他们拒绝纠正的错误。请改用mozilla MDN文档。

float:left将允许下一个元素从极端可能的左侧开始围绕当前元素包装文本。因此，当您删除它时，您的文本不会被<ul>元素包围。
一个很好的参考：http://css-tricks.com/all-about-floats/

<ul>留下换行符，因为它是一个块级元素。由于边距https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

，块级元素具有保留换行符的属性

Answer 3

当使用display: inline时，在此案例<li>标记中，容器转换为行内元素，因此仅填充必要空间。浮动你使用所有块，另一个只是位置。

当CSS应用于＆＃34; ul＆＃34;元件

3 个答案: