Question

我创建了一个名为＆＃34; mod1＆＃34;的父ID。和2个名为＆＃34; left＆＃34;和正确的＃34;。当我在父mod1 id中调用左侧和右侧类时，它们从父ID的高度溢出。我不想明确提到父ID和＃34; mod1＆＃34;的高度，我只是希望它根据其中的子类进行扩展。问题是父ID实际上并不包含它的子类，即没有孩子的背景颜色为＃888，并且边框似乎正好在它们上方。这是我的HTML代码

<head>
<style>
body
{
    max-width: 600px;
    margin: auto;
}

#mod1
{
    background-color: #888;
    border: 1px solid black;
}
#mod1 .left
{
    float: left;
    width: 75%;
}
#mod1 .right
{
    float: left;
    width: 25%;
}
</style>
</head>
<body>
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
</body>

Answer 1

父级的高度似乎崩溃的原因是因为当您浮动元素时，它会从文档流中取出，因此不会有助于计算父容器的最终尺寸。如果所有孩子都浮动，那么父母的身高将会崩溃为零。

解决方案相当简单：使用overflow: hidden清除父元素中的浮点数。但是，如果您要显示内容丰富的内容（如下拉菜单），则必须使用clearfix solution。

#mod1
{
    background-color: #888;
    border: 1px solid black;
    overflow: hidden;
    /* overflow: auto; will also work fine */
}

您可以从下面的代码段中看到添加规则有效：

body
{
  max-width: 600px;
  margin: auto;
}

#mod1
{
  background-color: #888;
  border: 1px solid black;
  overflow: hidden;
}
#mod1 .left
{
  float: left;
  width: 75%;
}
#mod1 .right
{
  float: left;
  width: 25%;
}

<div id="mod1">
  <div class="left">
    Book Accomodation + Deals With The Best In The Business
  </div>
  <div class="right">
    VIEW ON THE WEB
  </div>
</div>

Answer 2

CSS属性float导致元素＆＃34; collapse＆＃34;，这就是容器元素看起来不包含左右元素的原因。我通常在容器类中创建一个虚拟div，并给它属性clear: both;

<div id="mod1">
    <div class="left">
        Book Accomodation + Deals With The Best In The Business
    </div>
    <div class="right">
        VIEW ON THE WEB
    </div>
    <div class="dummy"></div>
</div>

并给它风格：

.dummy {
    clear: both;
}

请参阅其他可能的解决方案：How do you keep parents of floated elements from collapsing?

Answer 3

使用花车时（大部分时间）都必须清除浮子。
请改用flex。然后你不必清除浮子。它使这样的事情变得更容易。

body {
  max-width: 600px;
  margin: auto;
}
#mod1 {
  display: flex; /* Tells the browser you want children to use flex */
  font-family: sans-serif;
  color: white;
}
.left,
.right {
  flex: 1; /* Tells the browser to take "one piece of pie" for the width (or height, depending on flex-direction) */
  padding: 1em;
}
.left {
  background: orange;
}
.right {
  background: darkorange;
}

<div id="mod1">
  <div class="left">
    Book Accomodation + Deals With The Best In The Business
  </div>
  <div class="right">
    VIEW ON THE WEB
  </div>
</div>

CSS子div标签没有跨越父div标签

3 个答案: