[CSS] float元素顺序对布局的影响

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>float浮动的块状元素编写的先后顺序对页面布局的影响</title>
    <style>
      h2 {
        text-align: center;
        color: goldenrod;
      }
      .box {
        border: 1px solid #ff44;
      }
      .box::after {
        content: '';
        display: block;
        clear: both;
      }
      .left {
        float: left;
        width: 200px;
        height: 100px;
        background-color: red;
      }
      .center {
        height: 150px;
        background-color: green;
      }
      .right {
        float: right;
        width: 200px;
        height: 130px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>正常顺序 left center right</h2>
    <div class="box">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
    <h2>调换顺序 left right center</h2>
    <div>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="center">center</div>
    </div>
    <h2>调换顺序 left right center带margin</h2>
    <div class="box">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="center" style="margin: auto 230px;">center (margin: auto 230px;)</div>
    </div>
  </body>
</html>

要点：

div1设置float:left; div2不浮动。 div3设置float:right;

块级元素顺序为div1>div3>div2。

说明：只要书写html时div3写在div2之前，浏览器就会根据文档流先渲染div1、div3内容。之后由于div1和div3都半脱离了文档流，因此渲染div2内容时会无视div1、div3进行渲染，但文字会环绕于div1、div3之间。也因此有了三栏式布局。

浮动元素脱离文档流，会覆盖在非浮动元素的上面。

关于float浮动的块级元素在编写html时先后顺序对布局的影响

david2tdw / blog

[CSS] float元素顺序对布局的影响 #131