前一个div中的浮动导致与

时间：2016-10-25 22:06:36

标签： html css

我一直试图纠正这个问题很长一段时间，我试图像其他解决方案中所说的那样使用clear: both，但是，它似乎并不适用于我的实例。我相信这个问题特定于使用浮点数，如果我是正确的，但我的问题是，我怎样才能避免div重叠在前一个div的顶部？

这是我的问题的截图：

enter image description here

如您所见，浅色灰色div与其上方的白色div部分重叠。 ipsum文本应该在白色div中，而工作流文本应该在灰色div中，居中，在顶部。

以下是描述我的问题的代码段：

＆＃13;
＆＃13; 
.about_me {
  height: 300px;
  text-align: center;
}
.about_me h2 {
  margin-top: 90px;
  font-family: 'Open Sans', sans-serif;
}
.brief_desc {
  text-align: right;
  font-family: 'Open Sans', sans-serif;
  float: left;
  width: 50%;
  margin-top: 30px;
  font-size: 30px;
}
.brief_desc p {
  padding-left: 300px;
  padding-right: 15px;
  color: #505050;
}
.detailed_desc {
  float: right;
  text-align: left;
  margin-top: 55px;
  width: 50%;
}
.detailed_desc p {
  font-family: 'Open Sans', sans-serif;
  margin-left: 15px;
  padding-right: 270px;
  color: #909090;
}
.work_flow {
  background-color: #f5f4f0;
  height: 400px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
＆＃13; 
<div class="about_me">
  <h2>ABOUT ME</h2>

  <div class="icons">
    <img src="black1.svg" class="icon" />
    <img src="black2.svg" class="icon" />
    <img src="black3.svg" class="icon" />
    <img src="black4.svg" class="icon" />
    <img src="black5.svg" class="icon" />
  </div>

  <div class="brief_desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div class="detailed_desc">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<div class="work_flow">
  <h1 class="blah">Work Flow</h1>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

这个问题众所周知：它被称为崩溃浮动。浮动元素时，它实际上从文档流中取出，因此不会影响父元素的最终计算维度。在这种情况下，.about_me的高度设置为300px，因此由于高度不足，内容将超过边界。以下解决方案可以解决您的问题：

1。使用overflow: hidden技巧

隐藏溢出似乎强制浮动清除，因此允许父母封装浮动的孩子。考虑到这一点，您不再需要定义高度......除非它是一个刻意的设计选择。

.about_me {
  text-align: center;
  overflow: hidden;
}

您可以使用overflow的任何其他值，只要它不是visible的默认值即可。这种行为背后的确切解释是explained in another SO question。

注意：此解决方案的一个主要缺点是，在某些用例中，overflow: visible是所需的属性。在这种情况下，您将不得不依赖称为 clearfix hack 的替代解决方案（参见第2点）。

请参阅下面的代码段中的工作原理：

.about_me {
  overflow: hidden; /* Clearfix */
  text-align: center;
}

.about_me h2 {
  margin-top: 90px;
  font-family: 'Open Sans', sans-serif;
}

.brief_desc {
  text-align: right;
  font-family: 'Open Sans', sans-serif;
  float: left;
  width: 50%;
  margin-top: 30px;
  font-size: 30px;
}

.brief_desc p {
  padding-left: 300px;
  padding-right: 15px;
  color: #505050;
}

.detailed_desc {
  float: right;
  text-align: left;
  margin-top: 55px;
  width: 50%;
}

.detailed_desc p {
  font-family: 'Open Sans', sans-serif;
  margin-left: 15px;
  padding-right: 270px;
  color: #909090;
}

.work_flow {
  background-color: #f5f4f0;
  height: 400px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
<div class="about_me">
    <h2>ABOUT ME</h2>

    <div class="icons">
        <img src="black1.svg" class="icon" />
        <img src="black2.svg" class="icon" />
        <img src="black3.svg" class="icon" />
        <img src="black4.svg" class="icon" />
        <img src="black5.svg" class="icon" />
     </div>

     <div class="brief_desc">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>

     <div class="detailed_desc">
         <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
      </div>
</div>

<div class="work_flow">
    <h1 class="blah">Work Flow</h1>
</div>

2。使用 clearfix hack。

或者，您可以创建一个伪元素来清除浮动元素，称为clearfix hack。一个surprisingly large proportion of browsers in use today actually support pseudo-elements，所以不要因为伪元素的使用听起来很陌生;或者哎呀，即使IE8支持它（但你必须使用单冒号命名，即{{1}而不是:after）。

::after

请参阅代码段以获取概念验证示例：

.about_me::after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

.about_me::after { /* Use ::after pseudoelement as imaginary element to clear floats */
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.about_me h2 {
  margin-top: 90px;
  font-family: 'Open Sans', sans-serif;
}

.brief_desc {
  text-align: right;
  font-family: 'Open Sans', sans-serif;
  float: left;
  width: 50%;
  margin-top: 30px;
  font-size: 30px;
}

.brief_desc p {
  padding-left: 300px;
  padding-right: 15px;
  color: #505050;
}

.detailed_desc {
  float: right;
  text-align: left;
  margin-top: 55px;
  width: 50%;
}

.detailed_desc p {
  font-family: 'Open Sans', sans-serif;
  margin-left: 15px;
  padding-right: 270px;
  color: #909090;
}

.work_flow {
  background-color: #f5f4f0;
  height: 400px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

相关问题
最新问题