html - float :right moves other divs down

Question

我在另一个 div (.body) 中有一个 div (.contactquestion)，它试图 float:right，但是当我将 float:right 放在 .contactquestion 上，它将 .nav 类(图片中的标题)向下移动了大约 100px。我完全不知道为什么。这是我的大部分 HTML，但不是我的全部 CSS。如果您需要更多，我很乐意提供。

float 属性通常是这样做的吗？任何帮助将不胜感激。

编辑:这是一个包含所有内容的 fiddle 。除非你拉伸(stretch)它，否则中心区域会有点乱，但目前这并不重要。 https://jsfiddle.net/BTJohnson/zo6132yL/

这是问题的图片:

.body{
      width: 60%;
      top: 100px;
      position: relative;
      margin: 0 auto;
      height: 100%;
      background-color: #444;
      color: white;
    }

    .businessinquiry {
      float: left;
      width: 45%;
      border: 1px solid black;
      margin-left: 25px;
    }

    .contactquestion {
      width: 45%;
      background-color: #444;
      padding: 5px;
      opacity: .9;
      margin-bottom: 50px;
      border: 1px solid black;
      float: right;
      margin-right: 25px;
    }

	<div class="nav">
		<ul>
			<li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li>
			<li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li>
			<li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li>
			<li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li>
		</ul>
	</div>

	<div class="body">
		<div class="businessinquiry">
			<h2>Business Inquiries</h2>
			<p>...</p>
			<p>...</p>
		</div>
		<div class="contactquestion">
			<div class="words">
				<h2>General Questions & Inquiries</h2>

			</div>
			<form method="post" action="../php/index.php">
        
    			<input class="info" name="name" placeholder="What's your name?">
            
    			<input class="info" name="email" type="email" placeholder="What's your email?">
            
    			<textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
    			<input class="info" id="submit" name="submit" type="submit" value="Submit">
        
			</form>
		</div>
			<div class="social">

			</div>
	</div>

    

Answer 1

需要添加.fixit类来重置 float div的位置(.businessinquiry,.contactquestion)并移除margin-顶部:75px 关闭 .social

.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

body {
  margin: 0;
  padding: 0;
  background-image: url("../pics/nature.png");
  background-size: 150%;
  font-family: 'Lato', sans-serif;
}

.nav {
  opacity: .9;
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  float: left;
  padding: 0;
  margin: 0;
  width: 100%;
}
.nav li {
  font-family: 'Lato', sans-serif;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  text-align: center;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #efefef;
  color: #444;
  cursor: default;
}

img {
  vertical-align: bottom;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.5em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

/* Centre the page */

.body{
  width: 60%;
  top: 100px;
  position: relative;
  margin: 0 auto;
  height: 100%;
  background-color: #444;
  color: white;
}

.businessinquiry {
  float: left;
  width: 45%;
  border: 1px solid black;
  margin-left: 25px;
}

.contactquestion {
  width: 45%;
  background-color: #444;
  padding: 5px;
  opacity: .9;
  margin-bottom: 50px;
  border: 1px solid black;
  margin-right: 25px;
  
  float: right;
}

/* Centre the form within the page */
form {
  margin:0 auto;
  text-align: center;
}

/* Style the text boxes */

input, textarea {
  height:30px;
  background:#444;
  border:1px solid white;
  padding:10px;
  font-size:1.2em;
  color:white;
  font-family: 'Lato', sans-serif;
}

input:focus, textarea:focus {
  border:1px solid white;
  color: white;
}

#submit {
  height: 50px;
  cursor: pointer;
  transition: .3s background-color;
  width: 9em;
  float: right;
  margin-right: 72px;
  margin-top: 6px;
  margin-bottom: 22px;
}

#submit:hover {
  background-color:#005f5f ;
}

.info[name="name"] {
  width: 8em;
  margin-right: 8px;
  margin-top: 22px;
}

.info[name='email'] {
  width: 8em;
  margin-left: 8px;
  margin-top: 22px;
}

.message {
  width: 350px;
  margin-top: 16px;
  margin-bottom: 16px;
  height: 100px;
  font-size: 1em;
}

.words {
  text-align: justify;
  color: #efefef;
  margin-left: 24px;
  margin-right: 24px;
}

.social {
  padding: 20px;
  text-align: center;
}

.social img {
  margin: 75px;
  opacity: .9;
  size: 25px;

}

	<div class="nav">
		<ul>
			<li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li>
			<li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li>
			<li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li>
			<li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li>
		</ul>
	</div>

	<div class="body">
  <!-- .row start -->
  <div class="row fixit">
  
		<div class="businessinquiry">
			<h2>Business Inquiries</h2>
			<p>Interested in working together? Fill out the simple form below with some more information about your project, and I'll be in touch.</p>
			<p>Don't be afraid to be honest with us about your timeline and your budget. We're upfront about our prices, and knowing beforehand how we can best help you will really help later on.</p>
		</div>
		<div class="contactquestion">
			<div class="words">
				<h2>General Questions & Inquiries</h2>

			</div>
			<form method="post" action="../php/index.php">
        
    			<input class="info" name="name" placeholder="What's your name?">
            
    			<input class="info" name="email" type="email" placeholder="What's your email?">
            
    			<textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
    			<input class="info" id="submit" name="submit" type="submit" value="Submit">
        
			</form>
    
		</div>
     </div><!-- .row end -->
     
			<div class="social">
				<a class="facebook" href="https://www.facebook.com/bjohnson.rbi"><img src="../pics/facebook.png"></a>
				<a class="twitter" href="https://twitter.com/braxtontjohnson"><img src="../pics/twitter.png"></a>
				<a class="instagram" href="https://www.instagram.com/b_rax_johnson/"><img src="../pics/instagram.png"></a>
				<a class="youtube" href="https://www.youtube.com/user/RBIproductions"><img src="../pics/youtube.png"></a>
			</div>
      
	</div>