Question

我在css面临一个小小的奇怪问题。在尝试使用浮动元素时，我遇到了这种情况。

enter code

 code {
            background: #2db34a;
            border-radius: 6px;
            color: #fff;
            display: block;
            font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
            padding: 2px 15px;
            text-align: center;
        }       

header,
section,
aside,
footer {
  margin-bottom: 2px;
}
        section {
            float: left;
            width: 63%;
        }

        aside {
            width: 30%;
           /* Here I place "float: right " to see how it works & remove to see how it works */
           
        }

        footer{
        clear:both;
        }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>testing floats</title>   
</head>
<body>
    <header>
        <code>&#60;header&#62;</code>
    </header>

    <section>
        <code>float: left;</code>
    </section>

    <aside style="border:2px solid red;">
        <code> float: right;</code>
    </aside>

    <footer>
        <code>&#60;footer&#62;</code>
    </footer>

</body>
</html>

案例1：当我放置浮动时：正好放在＆lt;旁边＆gt;元素，我在下面看到它。这是预期的。

both elements floating

案例2：当我移除浮动时：右边的元素，我期待＆lt; aside＆gt;元素应该简单地位于＆lt; section＆gt;下面element as＆lt; section＆gt;元素是浮动的。＆LT;一旁＆GT;元素不应该显示为浮动＆lt; section＆gt;元素具有与＆lt; aside＆gt;相同的高度element.But＆lt; aside＆gt;元素是可见的。我看到它的高度自动增加。我无法理解为什么＆lt; aside＆gt;元素的高度正在增加。

aside element with no float

我附上了截图以便更好地理解。请告诉我这里我想念的事情。

Answer 1

这是因为你没有清除float:left上的section。

在下面的示例中，我添加了清除元素<div style="clear:both;"></div>。

＆＃13;

code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 2px 15px;
  text-align: center;
}

header,
section,
aside,
footer {
  margin-bottom: 2px;
}

section {
  float: left;
  width: 63%;
}

aside {
  width: 30%;
  /* Here I place "float: right " to see how it works & remove to see how it works */
}

footer {}

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>testing floats</title>
</head>

<body>
  <header>
    <code>&#60;header&#62;</code>
  </header>

  <section>
    <code>float: left;</code>
  </section>

  <div style="clear:both;"></div>

  <aside style="border:2px solid red;">
    <code> float: right;</code>
  </aside>

  <footer>
    <code>&#60;footer&#62;</code>
  </footer>

</body>

</html>

＆＃13;

与其他浮动元素一起使用时，元素高度会发生变化

1 个答案: