html - 与子内联 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 是一个 block 元素，旨在清除其他元素。默认情况下，h1 是其父元素宽度为 100% 的 block 。在这种情况下，侧边栏上没有宽度，即窗口宽度的 100%。

h1 标签清除了 float 。通过为侧边栏本身或 h1 标签设置宽度， float 可以工作。设置侧边栏的宽度也会限制子 h1 标签的宽度。