能否在section内嵌套div与article？我的分栏布局代码是否正确？

嘿，这两个问题我来帮你捋清楚～

完全可以！HTML5里的<section>本身就是用来划分文档中具有主题性的区块，它作为一个语义化的容器，内部完全可以嵌套<div>和<article>：

• <div>是通用的块级元素，用来做布局上的分组或者样式包裹，非常适合你这里用来放图片的场景；
• <article>代表独立的、可被单独复用的内容块，比如你右侧的“About me”文章内容，放在section里完全符合语义规范，只要内容逻辑上属于这个section的主题就行。

先把你写的代码贴出来：

<section> 
  <h1>Section header</h1> 
  <div style="float: left;"> 
    <img src="#" alt="somepic" /> 
  </div> 
  <article style="float: right;"> 
    <h2>About me</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
  </article> 
</section>

这段代码语法上是合法的，浏览器能正常渲染，但有几个小问题会影响布局健壮性和可维护性：

• 浮动导致容器塌陷：因为内部元素用了float，外层的<section>会失去高度（变成0），后面的元素可能会跑到它的上面，布局混乱；
• 内联样式不易维护：把样式写在style属性里，后期修改或者调整样式会很麻烦；
• 浮动布局不够灵活：float: right的article在屏幕变小时，可能会和左侧图片挤在一起，没有响应式适配。

给你优化后的版本，解决这些问题：

<style>
  /* 给section加清除浮动的样式，避免容器塌陷 */
  .intro-section {
    overflow: hidden;
    margin: 2rem 0;
  }
  /* 图片容器的样式，分离出来更易维护 */
  .intro-image {
    float: left;
    margin-right: 1.5rem;
    /* 可以给图片加个最大宽度，避免图片过大撑破布局 */
    max-width: 300px;
  }
  .intro-image img {
    width: 100%;
    height: auto;
  }
  /* 文章内容不用float:right，用overflow:hidden占据剩余空间，布局更灵活 */
  .intro-content {
    overflow: hidden;
  }
  /* 响应式适配，移动端时图片居中显示 */
  @media (max-width: 768px) {
    .intro-image {
      float: none;
      margin-right: 0;
      margin-bottom: 1rem;
      max-width: 100%;
      text-align: center;
    }
  }
</style>

<section class="intro-section">
  <h1>Section header</h1>
  <div class="intro-image">
    <img src="#" alt="somepic" />
  </div>
  <article class="intro-content">
    <h2>About me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
</section>

优化点说明：

1. 用overflow: hidden解决了section容器塌陷的问题；
2. 把内联样式移到了<style>标签里，结构和样式分离，后期修改更方便；
3. 给图片加了自适应宽度，并且添加了媒体查询，在移动端时图片会自动占满宽度，避免布局错乱；
4. 文章内容用overflow: hidden替代float: right，这样它会自动占据左侧图片之外的剩余空间，布局更灵活。

内容的提问来源于stack exchange，提问作者worker