html - 表格不在该部分中流动，而是从中流出

Question

所以我网页的最后一部分就像一个联系部分 - 它在左边有一些文本和一个表格，我在右边添加了一个联系表格，但是当我将它 float 到右边时它会离开该部分, 进入空白区域。有人可以帮忙找出我的错误在哪里吗？我在下面留下了 CSS 和 HTML。

.sayHello {
	width: 100%;
	height: 600px;
	background-color: #99ccff;
}

.sayHello div {
	margin: 0px 27% 0px 27%;
}

.sayHello p {
	padding-top: 40px;
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
}

.sayHello h3 {
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	width: 65%;
	text-align: left;
	float: left;
}

.sayHello table {
	float: left;
	border-spacing: 20px;
	color: snow;
	position: relative;
	bottom: 20px;
	overflow: hidden;
}

.sayHelloTable img {
	width: 30px;
	height: 30px;
	border: 2px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	background-color: snow;
}

.sayHelloTable td {
	color: snow;
}

.contactForm {
	border-radius: 5px;
  	background-color: #f2f2f2;
  	padding: 20px;
  	float: right;
  	width: 200px;
  	height: 300px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

<section class="sayHello">
		<div>
		
			<p>Say <b>Hello</b></p>
			<br>
			<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice 
				bunch of people. :)</h3>

		</div>

		<table class="sayHelloTable">
			<tr>
				<td><img src="phone.png"></td>
				<td>(416)555-0000</td>
				<td><img src="e-mail-logo.png"></td>
				<td>hello@adeveloping.com</td>
			</tr>

			<tr>
				<td><img src="twitter.png"></td>
				<td>@NAKATA</td>
				<td><img src="facebook.png"></td>
				<td>@NAKATA</td>
			</tr>

			<tr>
				<td><img src="80-google-plus-512.png"></td>
				<td>naskuuu123@gmail.com</td>
				<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
				<td>/NAKATA</td>
			</tr>
		</table>

		<div class="contactForm">
  			<form action="/action_page.php">
   			 	<label for="fname">First Name</label>
    			<input type="text" id="fname" name="firstname" placeholder="Your name..">

    			<label for="lname">Last Name</label>
    			<input type="text" id="lname" name="lastname" placeholder="Your last name..">

    			<label for="subject">Subject</label>
   				 <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">            </textarea>

    			<input type="submit" value="Submit">
  			</form>
		</div>
	</section>

Answer 1

希望这段代码对你有帮助:

.sayHello {
	width: 100%;
	height: 600px;
	background-color: #99ccff;
}

.sayHello .title-wrap {
	margin: 0px 27% 0px 27%;
}

.sayHello p {
	padding-top: 40px;
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
}

.sayHello h3 {
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	width: 65%;
	text-align: left;
	float: left;
}
.contact-wrap {
  display: inline-block;
  width: 100%;;
}

.sayHello table {
	float: left;
	border-spacing: 20px;
	color: snow;
	position: relative;
	bottom: 20px;
	overflow: hidden;
   width: calc(100% - 250px);
}

.sayHelloTable img {
	width: 30px;
	height: 30px;
	border: 2px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	background-color: snow;
}

.sayHelloTable td {
	color: snow;
}

.contactForm {
	  border-radius: 5px;
  	background-color: #f2f2f2;
  	padding: 20px;
  	float: right;
  	width: 200px;
  	height: 300px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

<section class="sayHello">
		<div class="title-wrap">
		
			<p>Say <b>Hello</b></p>
			<br>
			<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice 
				bunch of people. :)</h3>

		</div>
    <div class="contact-wrap">
    
      <table class="sayHelloTable">
        <tr>
          <td><img src="phone.png"></td>
          <td>(416)555-0000</td>
          <td><img src="e-mail-logo.png"></td>
          <td>hello@adeveloping.com</td>
        </tr>

        <tr>
          <td><img src="twitter.png"></td>
          <td>@NAKATA</td>
          <td><img src="facebook.png"></td>
          <td>@NAKATA</td>
        </tr>

        <tr>
          <td><img src="80-google-plus-512.png"></td>
          <td>naskuuu123@gmail.com</td>
          <td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
          <td>/NAKATA</td>
        </tr>
      </table>

      <div class="contactForm">
          <form action="/action_page.php">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">

            <label for="subject">Subject</label>
             <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">            </textarea>

            <input type="submit" value="Submit">
          </form>
      </div>
    </div>
	</section>