html - float 元素下的额外 margin

我对容器的构造方式有疑问。我有两行，每行两列。考虑4个象限（请参见下图）。左下象限上升到右上象限。

我使用浮动控件能够切换不同视口的位置，因此必须使用浮动控件。我已经在这个问题上停留了一段时间，但似乎无法弄清楚。

我包括了它正在做的快照。除了左下象限进入右上象限之外，行之间还存在间隙。

我还包括了一个小提琴。有人看到发生了什么吗？

.section-blocks {
	width: 50%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
.section-block-img {
	height: 100%;
	width: 100%;
}
.left {
	float: left;
}
.right {
	float: right;
}

#company-information {
	width: 100%;
	height: auto;
}
.company-information-block-title, .company-information-block-title2, .company-information-block-general-title, .company-information-block-description {
	color: #313743;
	line-height: 1.4em;
}
.company-information-block-title {
	font-size: 1.6em;
	margin-bottom: 20px;
}
.company-information-block-title2 {
	font-size: 3.2em;
	margin-bottom: 40px;
	font-weight: bold;
	color: #0085A1;
}
.company-information-block-general-title {
	font-size: 2.2em;
	margin-bottom: 40px;
	font-weight: bold;
}
.company-information-block-description {
	font-size: 1.2em;
	margin-bottom: 40px;
}


#company-information-block2 {
	height: auto;
}

#company-slider-section {
  width: 100%;
  height: auto;
  position: relative;
}

div#slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#responsive-section {
	width: 100%;
	height: auto;
}
#responsive-block1 {
	float: left;
	height: 100%;
	width: 40%;
	position: relative;
}
#responsive-block2 {
	float: right;
	height: auto;
	width: 60%;
	overflow: hidden;
}
#responsive-block2 img {
	width: 100%;
	height: auto;
}

<div class="section-blocks right">
			<div class="company-container">
				<div class="company-information-block-general-title">COMPANY STORY</div>
				<div class="company-information-block-description">
					<p>fdhsia  fid afdan fndsanfdn   fnfd fksanfanfd nfdanfan nfanafn dfnejwaoN F[gnf nr rnreogn aonrkngrnrnasng r narnrnoangrfkdkgraarmng aa arngrnga;aggkrioa   anrnr argnkrg gagnrgng g grkrn g g rgn e gan ggn as</p><br><br>
					<p>Ohtgfd htgdh thtrh trh rt sdfhh htsh shfh tsh sshh hs thhth shgsndfsank kfdnsak fndnkfdsa nkf f ndaiof nfasoanovn ndan fna gn an gnalnasgng agngna na nngfen grana akn gngaananogn</p>

				</div>
			</div>
		</div><div id="company-slider-section">
			<div class="section-blocks left">
			<div id="slider" class="slider">
			  <figure class="figure figure2">
				<div class="slide-wrapper">
				  <div class="slide"><img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test1.jpg" alt class="slide-image"></div>
				</div>
			  </figure>
			</div>
		</div>
	</div>
	<div id="responsive-section">
		<div id="responsive-block1">
			<div class="company-container">
				<div class="company-information-block-general-title">INDUSTRY SPECIFIC</div>
				<div class="company-information-block-description"></div>
			</div>
		</div>
		<div id="responsive-block2">
			<img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test3.jpg" alt>
		</div>
	</div>

最佳答案

我看到的最简单的解决方案是使用.clearfix解决方案将各个象限包装成行：

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

关于html - float 元素下的额外 margin ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38146779/