float-css 在 div 图像旁边重叠

Posted 2023-03-04

【中文标题】float-css 在 div 图像旁边重叠

【英文标题】：float-css overlaps next to div image

【发布时间】：2018-02-21 16:15:15

【问题描述】：

当屏幕到达40rem 时，我的徽标和导航分别向左和向右浮动。然而，它与下一个包含背景图像的div 重叠。我尝试设置边距，但这只是将徽标/导航和图像移到页面下方。

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* 
  box-sizing: border-box;


body 
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;


img 
  max-width: 100%;
  height: auto;
  width: auto;


.container 
  width: 95%;
  max-width: 70em;
  margin: 0 auto;


.clearfix::after,
section::after 
  content: '';
  display: block;
  clear: both;



/* typography
    ================= */

.unstyled-list 
  margin: 0;
  padding: 0;
  list-style-type: none;



/* header
    ================= */

header 
  position: relative;
  left: 0;
  right: 0;
  margin: 1em;


.logo 
  width: 200px;
  height: 40px;


nav ul 
  margin: 0;
  padding: 0;
  list-style: none;


nav li 
  display: inline-block;
  margin: 1em;
  padding: 0.125em;


nav a 
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .75em;
  color: #DDD;



/* home-main
    ================= */

.home-main 
  background-image: url('../manjitcss/img/manjit-main.png');
  background-size: cover;
  background-position: center;
  padding: 10em 0;


@media(min-width:40rem) 
  .logo 
    float: left;
    margin-top: .5em;
  
  nav 
    float: right;
  


@media(min-width:60rem) 
  .logo 
    width: 250px;
    height: 50px;
  
  nav 
    margin-top: .5em;
  
  nav a 
    font-size: 1.04em;
  

<header>
  <img src="../manjitcss/img/logo.jpg"  class="logo">

  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About Me</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="home-main">
  <div class="container">
  </div>
</section>

【问题讨论】：

你能提供有效的sn-p代码吗？

我真的不明白你能截图吗

【参考方案1】：

您的 css 中有 .clearfix，但您还没有将它们应用到 header 其您正在浮动的内容。

将课程添加到header - 请参见下面的演示：

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* 
  box-sizing: border-box;


body 
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;


img 
  max-width: 100%;
  height: auto;
  width: auto;


.container 
  width: 95%;
  max-width: 70em;
  margin: 0 auto;


.clearfix::after,
section::after 
  content: '';
  display: block;
  clear: both;



/* typography
================= */

.unstyled-list 
  margin: 0;
  padding: 0;
  list-style-type: none;



/* header
================= */

header 
  position: relative;
  left: 0;
  right: 0;
  margin: 1em;


.logo 
  width: 200px;
  height: 40px;


nav ul 
  margin: 0;
  padding: 0;
  list-style: none;


nav li 
  display: inline-block;
  margin: 1em;
  padding: 0.125em;


nav a 
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .75em;
  color: #DDD;



/* home-main
================= */

.home-main 
  background-image: url('../manjitcss/img/manjit-main.png');
  background-size: cover;
  background-position: center;
  padding: 10em 0;


@media(min-width:40rem) 
  .logo 
    float: left;
    margin-top: .5em;
  
  nav 
    float: right;
  


@media(min-width:60rem) 
  .logo 
    width: 250px;
    height: 50px;
  
  nav 
    margin-top: .5em;
  
  nav a 
    font-size: 1.04em;
  

<header class="clearfix">
  <img src="http://placehold.it/50x50"  class="logo" />
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About Me</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="home-main">
  <div class="container">
   container
  </div>
</section>

【讨论】：

谢谢，解决了这个问题。我认为 clearfix 会自动应用于所有页眉和页脚，这显然不是！

【参考方案2】：

当您使用 float 时，请尝试在父级上使用 overflow 属性。当浮动离开其父级时。或者你也可以使用clearfix。

【讨论】：

我也用过 clearfix: .clearfix::after, section::after content: '';显示：块；明确：两者；

请参考这个***.com/questions/8554043/what-is-a-clearfix 我想display: table 会来的。

【参考方案3】：

这是浮动的问题。您可以使用 clearfix 或为 .home-main 应用浮动，如下所示

@media(min-width:40rem) 
      .logo 
        float: left;
        margin-top: .5em;
      
      nav 
        float: right;
      
     .home-main
        width: 100%;
        float: left;