css - 的内容是否与另一个 重叠？

Question

我一直面临这个问题，当我添加一个 div 时，它会重叠在它上面的 div 上？为了查看 div 的对齐位置，我给它设置了蓝色背景。我想搭顺风车<h1>标记到介绍 div 下方的页面中心。找到下面的代码-

我一直面临这个问题，当我添加一个 div 时，它会重叠在它上面的 div 上？为了查看 div 的对齐位置，我给它设置了蓝色背景。找到下面的代码-

          #intro{
             font-family: 'Sansita', sans-serif; 
            font-size: 170%;    
            float: right;                   
            width: 50%;                
            margin-right: 20px;
             margin-left: 10px;
                color: #ff471a ;
            } 
            
            
            
            #introImage { 
            
                float: left;
                width: 40%;
                margin-left: 70px;
                margin-top: 35px;
                box-shadow: 10px 10px grey;
                border-radius: 10px;
            
            }
            
            
             
        
        #hitchhiking-info {
            
            margin-top: 20px;
            width: 100%; 
            height: 100px;
            text-align: center;
            background-color: blue;
            float: none;
            
        }

</div> 
        
        <div id="intro-div"> 
            
            <p id="intro"> Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>    
            
            <img id="introImage" src="intro-image.jpg">
            
            
            
            
        </div> 
        
        <div id="hitchhiking-info">
            
            <h1 id="heading"> Hitchhiking </h1>   
        </div>
    


   

Answer 1

您的“hitchhiking-info”框一直显示在顶部的原因是因为您的“intro-div”框仅包含 float 元素，因此它没有高度。

要将“hitchhiking-info”div 推过 float 内容，您可以对其应用 clear:both。这将使它向左或向右浮动的“清晰”内容。

另一种选择是将 clearfix 类应用到您的“intro-div”(或给它一个明确的高度，以便它包含所有 float 内容)。查看下面的简单 clearfix 并阅读更多关于它们的信息 here .

clear:both 示例:

#intro {
  font-family: 'Sansita', sans-serif;
  font-size: 170%;
  float: right;
  width: 50%;
  margin-right: 20px;
  margin-left: 10px;
  color: #ff471a;
}
#introImage {
  float: left;
  width: 40%;
  margin-left: 70px;
  margin-top: 35px;
  box-shadow: 10px 10px grey;
  border-radius: 10px;
}
#hitchhiking-info {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: blue;
  float: none;
  clear: both;
}

<div id="intro-div">
  <p id="intro">Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a
    proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world.
    Fell free to comment any suggestions or feedback of my experiences and contact me for any query</p>
  <img id="introImage" src="intro-image.jpg">
</div>
<div id="hitchhiking-info">
  <h1 id="heading"> Hitchhiking </h1> 
</div>

Clearfix 示例:

#intro {
  font-family: 'Sansita', sans-serif;
  font-size: 170%;
  float: right;
  width: 50%;
  margin-right: 20px;
  margin-left: 10px;
  color: #ff471a;
}
#introImage {
  float: left;
  width: 40%;
  margin-left: 70px;
  margin-top: 35px;
  box-shadow: 10px 10px grey;
  border-radius: 10px;
}
#hitchhiking-info {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: blue;
  float: none;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

</div>

<div id="intro-div" class="clearfix">
  <p id="intro">Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a
    proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world.
    Fell free to comment any suggestions or feedback of my experiences and contact me for any query</p>
  <img id="introImage" src="intro-image.jpg">
</div>
<div id="hitchhiking-info">
  <h1 id="heading"> Hitchhiking </h1> 
</div>