与子inline-block元素一起使用时，Float不工作

Question

我正在尝试创建一个布局，其中有一个侧边栏，如标题和介绍，旁边的网格卡。但是，当我尝试使用float时，div的子元素的display:inline-block样式似乎会引起问题(当我在子元素上使用display:block时它会起作用)。

https://jsfiddle.net/e_video/hdd0wr1p/

HTML<标题>标题的例子

对不同主题的不同事物的描述。

<div class="sidebar">
  <h1>
    Title Example
  </h1>
  <p>
  Descrition of different things on different subjects.
  </p>
</div>
<div class="card-section">
  <article class="card"></article>
  <article class="card"></article>
  <article class="card"></article>
  <article class="card"></article>
  <article class="card"></article>
  <article class="card"></article>
</div>
<br/>

CSS

.card{
  background: red;
  width:100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}
.card-section,
.sidebar{
  float:left; 
}

Answer 1

工作得很好，你只需要声明宽度小于100% -https://jsfiddle.net/hdd0wr1p/2/或https://jsfiddle.net/hdd0wr1p/4/或https://jsfiddle.net/hdd0wr1p/5/

发生了什么……

h1是块元素，用于清除其他元素。默认情况下，h1是其父元素宽度的100%的块。在这种情况下，没有边栏的宽度，这是100%的窗口宽度。

这是h1标签，清除你的浮动。通过为侧边栏本身或h1标记设置宽度，浮动可以工作。设置侧边栏的宽度也会限制h1子标签的宽度