如何重叠浮动的div

Question

我有一个 white box 向左浮动。我将它调整到中心，我希望它与标题的背景图像重叠。但是当我调整 margin negative 以使其上升并与顶部的背景图像重叠时，它会自行切断。我不明白为什么

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> 
<title>Try Slim Leaf</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<section>
  <div class="container">
    <div class="row1">
        <div class="header">
          Women Over 35: Struggling With Stress Eating And Worried About How That’s Going Straight To Your Waistline?
        </div>
    </div>
  </div>
</section>
<section><!--Hero Title-->
  <div class="container">
    <div class="row1">
      <div class="hero-img">
        <h2>“I Lost <span class="red-text">53 Pounds</span> Eating Cakes, Pizza & Ice Cream… By Flipping The</h2>
        <h1>SUGAR SWITCH</h1>
        <h2>Inside My Body…”</h2>
        <h3>Discover How A <span class="red-text"><strong>“Near-Tragic”</strong></span> Experience Led An<br>
            Arkansas Woman To Discover The Secret <span class="red-text"><strong>“Sugar Switch...”</strong></span><br>
            And Lose Weight While Eating Delicious Carbs
        </h3>
        <h4>Now You Can Use This Breakthrough To Shed Unwanted Weight From The Comfort Of Your Home Too!</h4>
      </div><!--End Hero Img-->
    </div><!--End Row 1-->
  </div><!--End Container-->
</section><!--End Hero Title-->
<main><!--Main Content-->
  <section><!--Section 1-->
    <div class="container">
      <div class="row1 bg-gray">
        <div class="box-white">
          <div class="col">
            <div class="col1"><img src="images/img1.png" alt="" width="368" height="796" class="fluid-img"/></div>
            <div class="col2">
              <p class="std-p">Hey, my name’s Katie Patterson.</p>
              <p class="std-p"><strong>Over the next few minutes, I’m about to tell you my shameful story about how I nearly let my 5-year-old son drown…</strong></p>
              <p class="std-p">All because I was too out-of-shape to run 30 steps to save him.</p>
              <p class="std-p">Truthfully, I let myself go over the years…</p>
              <p class="std-p">And it got to the point I could barely stand the way I looked in the mirror.</p>
              <p class="std-p">My love life with my husband was practically non-existent.</p>
              <p class="std-p">I avoided taking photos with friends…</p>
              <p class="std-p">Seeing those pictures on social media made it painfully obvious how <strong>“big”</strong> I was compared to them.</p>
              <p class="std-p">And as much as I felt like I was <strong>“cursed”</strong> with bad genes and a body that piled on stubborn fat…</p>
              <p class="std-p">The tipping point came when being overweight nearly made my son drown.</p>
              <p class="std-p">Today, I’m relieved to say, my son’s okay…</p>
              <p class="std-p"><strong>AND there’s a silver lining too.</strong></p>
              <p class="std-p">Because this near-tragic experience led me to discover…</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
</body>
</html>

我是初学者，希望有人能帮助我。

谢谢。我很感激任何建议。

Answer 1

来自以上评论：

是.bg-gray上的overflow-x。如果您删除图像超出 parent 元素的需要。我正在寻找其他解决方案来代替溢出属性.

overflow-y: visible; 将允许您的图像溢出，auto 将包含任何元素并在必要时创建滚动。由于这是负边距，因此不会创建滚动。

如果没有 overflow-y，您的背景图片不会出现，因为您已经浮动了所有 children，因此 .bg-gray，又名 .row1 没有高度。

对于列布局，您应该查看使用 flexbox 的更现代的方法。删除您的花车并将 display: flex; 添加到 .col

CSS

.col {
    display: flex;
}

您应该会看到您的图像溢出 parent，并且您的列位于 side-by-side。

如果您必须使用浮点数，我建议不要使用溢出属性来让 parent 包含浮点数，而是使用一种技术，在清除浮动并有效地获取 parent 元素来包装浮动元素的浮动。

对于您的示例，您需要这样的东西：

CSS

.row1::after {
    content: '';
    display: table;
    clear: both;
}

不知道你是否还在使用 SCSS，但如果你在使用或为其他人使用：

参考：http://nicolasgallagher.com/micro-clearfix-hack/

SCSS 占位符 class 与 @extend

一起使用

%clear {

    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

.row {
    @extend clear;
}

SCSS 与@include

一起使用的混合

@mixin clear {

    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

.row {
    @include clear;
}

如何重叠浮动的div

How to overlap floated divs

html

dreamweaver