当div旁边的div浮动时，div的填充不起作用？

Question

所以我有2个div。一个是页面上的侧栏，它向左浮动。然后我右边有一个主体div。在我将侧栏改为浮动之前，我可以设置主div的边距和填充没有问题。但是，如果侧边栏设置为浮动，则主div上的样式将停止生效。这是css：

  #columns {
  background: #141;


  #main {
    margin-left: 17em;
    padding: 1em;
    padding-left: 3em;
    background: blue;
  }

  #side {
    float: left;
    padding: 1em 2em;
    width: 13em;
    background: #141;
    height: 100vh;
    margin-right: 2em;


    ul {
      padding: 0;
      li {
        list-style: none;
        a {
          color: #bfb;
          font-size: small;
        }
      }
    }

我猜这是浮动的一些属性，我不知道。有什么想法吗？

Answer 1

为什么会这样？

让我们看看a simple explanation of float：

  

float CSS属性指定应该从中获取元素   正常流动并沿其左侧或右侧放置   容器，其中文本和内联元素将环绕它。一个   浮动元素是float的计算值不是none的那个。

让我们看一下主要div设置为内联的行动：

＆＃13;

＆＃13;

body {
  margin: 0;
}
#main {
  background: blue;
  display: inline;
  padding: 10px;
  margin: 0 10px;
}
#side {
  float: left;
  width: 13em;
  background: rgba(0, 0, 0, 0.5);
  height: 300px;
}

＆＃13;

<div id="side">

</div>

<div id="main">

</div>

＆＃13;

＆＃13;

＆＃13;

结果

内联div围绕着它，非常棒。

现在让我们将该div重新设置为display: block，默认值为：

＆＃13;

＆＃13;

body {
  margin: 0;
}
#main {
  background: blue;
  padding: 10px;
  margin: 0 10px;
  width: 100px;
  height: 100px;
}
#side {
  float: left;
  width: 13em;
  background: rgba(0, 0, 0, 0.5);
  height: 300px;
}

＆＃13;

<div id="side">

</div>

<div id="main">

</div>

＆＃13;

＆＃13;

＆＃13;

结果

块div是下面的浮动div！为什么！？让我们再看看这个解释：

  

float CSS属性指定应该从中获取元素   正常流动并沿其左侧或右侧放置   容器，其中文本和内联元素将环绕它。一个   浮动元素是float的计算值不是none的那个。

解释

浮动div从正常文档流中取出，块div忽略它。

如何防止此行为并仍使用浮动？

简单，将块div从正常流程中取出;申请float: left

＆＃13;

＆＃13;

body {
  margin: 0;
}
#main {
  background: blue;
  padding: 10px;
  margin: 0 10px;
  width: 100px;
  height: 100px;
  float: left;
}
#side {
  float: left;
  width: 13em;
  background: rgba(0, 0, 0, 0.5);
  height: 300px;
}

＆＃13;

<div id="side">

</div>

<div id="main">

</div>

＆＃13;

＆＃13;

＆＃13;