CSS布局

• 块级元素（block）：独占一行，如div、p、h1等。
• 内联元素（inline）：不换行，如span、a、img等。
• display属性可切换元素类型。

<style>
  .block { display: block; background: #e3eafe; }
  .inline { display: inline; color: #386ff6; }
</style>
<div class="block">块级</div><span class="inline">内联</span>

• float:left/right 让元素脱离文档流，向左/右浮动。
• 常用于图片环绕、横向排列。
• 清除浮动：clear:both 或 overflow:hidden。

<style>
  .left { float: left; width: 100px; height: 100px; background: #e3eafe; }
  .right { float: right; width: 100px; height: 100px; background: #386ff6; }
  .clearfix::after { content: ''; display: block; clear: both; }
</style>
<div class="clearfix">
  <div class="left">左浮动</div>
  <div class="right">右浮动</div>
  <div style="background:#eee;">中间内容</div>
</div>