为什么浮动元素不会被稍后使用针对该特定元素的类定义的样式覆盖？ [关闭]答案

【问题标题】：Why don't floated elements get overridden by a later defined style using a class targeting that particular element? [closed]为什么浮动元素不会被稍后使用针对该特定元素的类定义的样式覆盖？ [关闭]
【发布时间】：2020-11-20 15:00:17
【问题描述】：

我正在尝试分析 w3schools 中作为示例给出的这段代码。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

这是我正在分析的代码。

这段代码中有 3 件事我无法理解。

1 - 为什么 'li.dropdown' 是内联块？将浮动的列表项（因此已经是内联块）变成内联块的目的到底是什么？我不知道那有什么用。

2 - 为什么当我将“li.dropdown”变成显示块时，它不会变成块？下拉菜单是浮动的，所以当我让它阻塞时，它不应该覆盖浮动，而是将其宽度扩展到 100%？显然它不会覆盖浮动，那为什么呢？如果它不覆盖浮动，那么为什么首先将其设为 inline-block 呢？

3 - 为什么“li a”和“.dropbtn”要分开定义？ .dropbtn 类是“li a”的一部分，那么为什么需要使用一个类来单独定义呢？

【问题讨论】：

1.删除它似乎不会改变任何东西，所以它可能只是多余的。（我们不能总是说出作者的意图是什么……尤其是当您从 w3schools 这样的垃圾网站获取示例时。） 2. 惊喜，计算 i> 之前的值是block - w3.org/TR/CSS21/visuren.html#dis-pos-flo 3. 作者的选择？我们应该怎么知道？总是有多种方法可以达到相同的最终结果。
我不明白第二个问题的答案。该元素是浮动的，但是当我后来让它显示块时，它仍然是浮动的。那么，为什么浮动没有被覆盖？我知道列表项本身是块，但它是浮动的，并且浮动不会被覆盖。

标签： css css-selectors css-float

【解决方案1】：

1.) inline-block 和 float 一起没有意义 - 其中一个是多余的，（尽管它们不一样），最好只使用 inline-block 显示。

2.) 具有display: block 的元素可以浮动，当它们浮动时，它们不会自动具有 100% 宽度，而是与定义的一样宽或 em> 与它们的内容一样宽（通常是图像）。

浮动的特殊之处在于其父元素的内容可以在其周围浮动，或者更好的说是在一侧（取决于是左还是右），再加上它的顶部和底部，取决于它在 HTML 结构中的位置。典型的情况还是文本在 div 或段落内的图像周围浮动。

3.) li a 适用于li 标签内的所有a 标签，在您的代码中也适用于.dropdown-content 内的链接，它们是“li 标签的祖父母。所以这个类是它们只影响具有该类的a。

【讨论】：

我想我已经想通了。这是让我最困惑的第二个问题，但我现在发现第二个显示块不会覆盖浮动，因为我没有重新定义浮动。我只是在重新定义已经被阻塞的显示。 w3school 和他们的解释和例子真的让像我这样迂腐的人感到困惑和恼火。我花了一整天的时间试图弄清楚这个简单代码的用途。

【解决方案2】：

li.dropdown {
  display: inline-block;
}

没有必要。

2 当一个元素浮动时，它会自动变成一个块元素，并且会生成一个块格式化上下文来包含该元素，浮动元素除了块元素之外还有自己特殊的显示行为。

3 “li a”和“.dropbtn”分别定义？

这是多余的。

结束

这篇文章可能会有所帮助：https://css-tricks.com/almanac/properties/f/float/

【讨论】：