CSS Clear Float 不适用于媒体查询

Posted 2023-03-04

技术标签:

【中文标题】CSS Clear Float 不适用于媒体查询【英文标题】：CSS Clear Float not working with Media Queries 【发布时间】：2019-07-26 15:54:12 【问题描述】：

我试图从浮动中清除两个元素，但它不起作用，我不知道为什么。答案可能（字面意思）就在我眼前。在清除之前，它可能与我的媒体查询或其他样式有关。 clear 本身甚至可以正常工作，但 float 属性却不行。这是我的样式表中的两个元素：

/* main navigation on small screens like smartphones */

#main_nav 
  position: sticky;
  top: 0;
  text-align: center;
  box-shadow: 0 0 1.563rem 0;


#main_nav ul 
  margin: 0;
  padding: 0;
  background-color: #1f1f14;
  border-top: 0.0625rem solid #faf352;


#main_nav ul li 
  list-style-type: none;
  display: inline-block;
  margin: 0.625rem 0;
  width: 22%;
  padding: 0;
  text-align: center;


#main_nav ul li a 
  padding: 0.2rem;
  color: #D7D7CF;
  font-family: 'Finger Paint';
  font-size: 0.7rem;
  text-decoration: none;



/* main container on small screens */

main 
  padding: 0.2rem 0.5rem 0 0.5rem;



/* large desktop screens - more than 1000px width */

@media screen and (min-width: 62.500em) 
  #main_nav 
    position: static;
    float: left;
    width: 20%;
    padding: 1rem;
    box-shadow: none;
  
  #main_nav ul li 
    width: 100%;
    padding: 0.5rem;
    display: block;
  
  #main_nav ul li a 
    display: inline-block;
    width: 90%;
    font-size: 0.9rem;
    margin: 0.2rem;
    padding: 0.3rem;
  
  main 
    width: 95%;
    float: left;
    padding: 0 1rem;
  
  /* clear float */
  .cf:before,
  .cf:after 
    content: "";
    display: table;
    display: block;
  
  .cf:after 
    clear: both;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>page title</title>
  <link href="mystyles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="holder">

    <header id="page_header">
      <h1><span class="yellow">This is</span> a heading</h1>
    </header>

    <nav id="main_nav" class="cf">
      <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>
    </nav>

    <main class="cf">
      <section>
        <article>
          <h3>This is an awesome heading</h3>
          <p>text</p>
          <img src="images/st-color-300px.jpg" >
          <p>text</p>
        </article>
      </section>
    </main>
  </div>
</body>

</html>

【问题讨论】：

您能否详细说明您想要实现的目标？如果这是我的想法，只需在您的媒体查询中删除 main : width: 95%; float: left; padding: 0 1rem; 上的这个。我正在尝试清除 main_nav 和 main 的浮动。它们都在同一个 div 容器 (id="holder") 中，并且都浮动到左侧。但是当我对它们使用 clearfix 时，它们会继续浮动。编辑：它们都向左浮动，因此它们应该在“持有人”容器中彼此相邻排列，但它们没有。 “持有人”容器在它们身后折叠，但主导航main_nav 和main-container 与内容没有对齐，它们继续水平堆叠。我希望我解释得没错。 【参考方案1】：

将您的 clearfix 应用于容器而不是浮动元素。在这里，您应该在 #holder 上应用 clearfix（虽然我建议添加一个类并以它而不是 id 为目标，但我在这里使用了 container）。

/* main navigation on small screens like smartphones */

#main_nav 
  position: sticky;
  top: 0;
  text-align: center;
  box-shadow: 0 0 1.563rem 0;


#main_nav ul 
  margin: 0;
  padding: 0;
  background-color: #1f1f14;
  border-top: 0.0625rem solid #faf352;


#main_nav ul li 
  list-style-type: none;
  display: inline-block;
  margin: 0.625rem 0;
  width: 22%;
  padding: 0;
  text-align: center;


#main_nav ul li a 
  padding: 0.2rem;
  color: #D7D7CF;
  font-family: 'Finger Paint';
  font-size: 0.7rem;
  text-decoration: none;



/* main container on small screens */

main 
  padding: 0.2rem 0.5rem 0 0.5rem;


/* large desktop screens - more than 1000px width */

@media screen and (min-width: 62.500em) 

  #main_nav 
    position: static;
    float: left;
    width: 20%;
    padding: 1rem;
    box-shadow: none;
  

  #main_nav ul li 
    width: 100%;
    padding: 0.5rem;
    display: block;
  

  #main_nav ul li a 
    display: inline-block;
    width: 90%;
    font-size: 0.9rem;
    margin: 0.2rem;
    padding: 0.3rem;
  

  main 
    width: 95%;
    float: left;
    padding: 0 1rem;
  

  /* clear float */

  .container:after 
    content: "";
    display: table;
    clear: both;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>page title</title>
  <link href="mystyles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="holder" class="container">

    <header id="page_header">
      <h1><span class="yellow">This is</span> a heading</h1>
    </header>

    <nav id="main_nav" class="cf">
      <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>
    </nav>

    <main class="cf">
      <section>
        <article>
          <h3>This is an awesome heading</h3>
          <p>text</p>
          <img src="images/st-color-300px.jpg" >
          <p>text</p>
        </article>
      </section>
    </main>
  </div>
</body>

</html>

【讨论】：

做到了。非常感谢！

以上是关于CSS Clear Float 不适用于媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

媒体查询不适用于移动设备 - 电话

媒体查询不适用于横向

引导媒体查询不适用于小型平板电脑和横向模式

媒体查询适用于引导类，但不适用于我的 id 或类

媒体查询不适用于 Android

媒体查询不适用于 Wordpress