Question

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

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

编辑：这里是一切的小提琴。除非你伸展它，否则中心区域会有点混乱，但目前并不重要。 https://jsfiddle.net/BTJohnson/zo6132yL/

这是问题的图片：

＆＃13;

.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;
    }

＆＃13;

	<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>

＆＃13;

Answer 1

需要添加.fixit类来重置浮动div的位置（.businessinquiry，.contactquestion）并移除margin-top: 75px <{1}}

.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;

}

Answer 2

您尝试添加吗？ ul{margin:0}到你的css样式表？我认为这与浮动无关。

你在.body类中有top:100px，你也应该删除它。

你提供的小提示并没有真正显示任何错误顺便提一下。

Answer 3

我浏览了JSfidle。实际上对于班级.social你给了margin-top：75px。

.social {

  padding: 20px;
  text-align: center;
  margin-top: 75px;
}

divs with classes .businessinquiry。 contactquestion，.social在div中与class .body。但是你可以左右浮动.businessinquiry。 contactquestion。 .social没有浮动属性。

要解决此问题，您需要执行以下操作。

将.social放在一边.body div来解决它。
使用clear：两个属性取消后的浮动属性 .contactquestion div。
社交你给了保证金最高：75px。删除此

float：right将其他div向下移动

3 个答案: