Question

您好我是HTML / CSS的新手，我正在创建一个简单的网页。我正在学习一些关于定位和花车的知识。

在我的页面中，我有3个div。第一个div有class=".page"，它围绕其他2个div .welcome和.blog。我想将.welcome div放到右边，将.blog div放到左边。所以我决定使用float left并向右浮动。

我的问题是，当.blog向左浮动时，.page div不再包围它们，我不知道为什么。我给div着色了。

.page div为灰色
.blog是蓝色的，但当浮动时，它会失去颜色
.welcome在右侧显示为绿色

https://jsfiddle.net/jnm4z5c1/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  background:red;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Main style */

.page {
  margin: 36px auto;
  width: 90%;
  background: gray;
}
.welcome {
  float: right;
  margin: 0 auto 53px;
  background: green;
  width: 40.875%;
}
.blog {
  clear: left;
  float: left;
  margin: 0 0 20px;
  width: 49.375%;
}
.main {
  width: 62.88%;
}
.other {
  width: 36.777%;
}
.lede {
  font-size: 1.5em;
}
.lede a {
  font-size: 0.45833333em;
}

<div class="site">

  <div class="page">
    
    <h1 class="lede"> Hello <a href="#">World</a>  </h1>

    <div class="welcome">

      <p>&#8220;Let&#8217;s go to town,&#8221; I said.</p>

      <p>They looked at me admiringly. With three hundred almost indestructible androids on the loose I was the big brave hero. I grinned at them and hoped they couldn&#8217;t see the sweat on my face. Then I walked over to the Copter and climbed in.</p>

      <p>&#8220;Coming?&#8221; I asked.</p>

      <p>Jack was pale under his freckles but Chief Dalton grinned back at me. &#8220;We&#8217;ll be right behind you, Morrison,&#8221; he said.</p>

      <p>Behind me! So they could pick up the pieces. I gave them a cocky smile and switched on the engine, full speed.</p>

      <p>Carron City is about a mile from the plant. It has about fifty thous

    </div>
    
    <div class="blog section">

      <div class="main">

        <p>&#8220;Let&#8217;s go to town,&#8221; I said.</p>

        <p>They looked at me admiringly. With three hundred almost indestructible androids on the loose I was the big brave hero. I grinned at them and hoped they couldn&#8217;t see the sweat on my face. Then I walked over to the Copter and climbed in.</p>

        <p>&#8220;Coming?&#8221; I asked.</p>

        <p>Jack was pale under his freckles but Chief Dalton grinned back at me. &#8220;We&#8217;ll be right behind you, Morrison,&#8221; he said.</p>

        <p>Behind me! So they could pick up the pieces. I gave them a cocky smile and switched on the engine, full speed.</p>

        <p>Carron City is about a mile from the plant. It has about fifty thousand inhabitants. At that moment, though, there wasn&#8217;t a soul in the streets. I heard people calling to each other inside their houses, but I didn&#8217;t see anyone, human
          or android. I circled in for a landing, the Police Copter hovering maybe a quarter of a mile back of me. Then, as the wheels touched, half a dozen androids came around the corner. They saw me and stopped, a couple of them backing off the way
          they had come. But the biggest of them turned and gave them some order that froze them in their tracks, and then he himself wheeled down toward me.</p>

      </div>
      <!-- End .main -->

      <div class="other">
      </div>
      <!-- End .other -->

    </div>
    <!-- End .blog .section -->
    
  </div>
  
</div>

Answer 1

当您在元素上设置浮点数时，它将超出正常的内容流，这会导致容器在高度上折叠。在您的示例中，它等于struct pcap_t标记的高度，因为它是唯一未设置为浮动的子项，否则它将折叠到零高度。

你需要清除花车以恢复正常的布局，有一些ways，这里是最受欢迎的：

h1

或：

.page {
  overflow: hidden;
}

或：

.page {
  overflow: auto;
}

<强> jsFiddle

Answer 2

有很多方法，但最推荐的方法是：

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

<强> JsFiddle

Answer 3

浮动元素不会影响非浮动父项的高度。你也需要浮动父元素。

.page{
    margin: 36px 5%;
    width:90%;
    background:gray;
    float:left;
}

更新了Fiddle

浮动导致页面包装器崩溃

3 个答案: