Question

如何清除浮动div以便按下页脚？我在父元素上尝试:after，尝试插入清除div，尝试添加clear：两者都在浮动div的父元素上。它都没有奏效。这是什么问题？那么如何在这种情况下清除div？

* {margin: 0;}

html, body {height: 100%;}

.wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -4em;
     clear:both;
}
.left {
  width:50%;
  height:600px;
  background-color: green;
  float: left;
}

.right {
  width: 50%;
  background-color: yellow;
  float: left;
}

p {font-size: 20px;}

.footer, .push {height: 140px; }

.footer {background-color: red;}

   <body>
    <div class="wrapper">
    <div class="left">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
      </div>
    
    <div class="right">
      <p>right</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
    </div>
     
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

Answer 1

由于.footer是要清除浮点数的元素，因此您将clear: both放在.footer上。

Answer 2

* {margin: 0;}

html, body {height: 100%;}

.wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0;
}
.left {
  width:50%;
  height:600px;
  background-color: green;
  float: left;
}

.right {
  width: 50%;
  background-color: yellow;
  float: left;
}

p {font-size: 20px;}

.push{ clear: both; min-height: 1px; }

.footer{height: 140px; }

.footer {background-color: red;}

   <body>
    <div class="wrapper">
    <div class="left">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
      </div>
    
    <div class="right">
      <p>right</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
    </div>
     
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

Answer 3

* {margin: 0;}

html, body {height: 100%;}

.wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -4em;
     clear:both;
}
.left {
  width:50%;
  height:600px;
  background-color: green;
  float: left;
}

.right {
  width: 50%;
  background-color: yellow;
  float: left;
}
.push {clear:both;}
p {font-size: 20px;}

.footer {height: 140px; }

.footer {background-color: red;}

   <body>
    <div class="wrapper">
    <div class="left">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
      </div>
    
    <div class="right">
      <p>right</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptates fugiat ducimus nesciunt impedit vero iure rerum repellendus voluptatum, praesentium illum numquam a blanditiis quasi doloremque placeat animi consectetur quos.</p>
    </div>
     
    </div>
    <div class="push"></div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

无法清除浮动div

3 个答案: