浮动元素下的额外边距

Question

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

我正在使用漂浮物来为不同的视口切换位置，所以漂浮物是必须的。我已经在这个问题上停留了一段时间，似乎无法弄清楚。

我包括了它正在做什么的快照。除了左下象限进入右上象限外，行与行之间有空隙。

我也包含了一个 fiddle。有人看到发生了什么事吗？

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

Answer 1

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

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

Answer 2

不需要同时使用float: left;和float: right，只需将其向左浮动即可。这也将使代码更易于阅读。您可以将 "blocks" 放入 "rows" 以确保它们不会相互干扰。通过设置块 overflow 你可以确保它 "grows" 和它的 children.

.row {
  position: relative;
  overflow: hidden;
}
.section-blocks {
 float: left;
 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="row">
  <div class="section-blocks">
    <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 class="section-blocks">
  <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>
<div class="row">
<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>
  </div>

浮动元素下的额外边距

Extra margin under floated elements

html

css

margin

css-float