浮动布局

浮动

应用场景

  1. 文字环绕(最初的使用场景)
  2. 横向排列

浮动的基本特点

  1. 当一个元素浮动后，元素必定为块盒（会更改display为block）
  2. 浮动元素的包含块与常规流一致为父元素的内容盒。

盒子尺寸

  1. 宽度为auto时，适应内容高度
  2. 高度为auto时，与常规流一致，适应内容高度
  3. margin为auto， 为0
  4. border，padding百分比设置于常规流一样

浮动元素不会吸收剩余空间

盒子排列

  1. 常规流块盒在排列时无视浮动元素;
  2. 浮动盒子在包含块中排列时，会避开常规流块盒;
  3. 行盒在排列时会避开浮动元素(文字环绕);
  4. 外边距合并不会发生(BFC);
  5. 浮动盒子之间的排列如下图
    image

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动元素

清除浮动，clear

  • 默认值：none
  • left：清除左浮动，添加该样式的元素必须出现在前面所有左浮动元素盒子的下方
  • right：清除右浮动，添加该样式的元素必须出现在前面所有右浮动元素盒子的下方
  • both：清除左右浮动，添加该样式的元素必须出现在前面所有浮动元素盒子的下方
clearfix::after {
  content: '';
  display: block;
  clear: both![image](https://img2024.cnblogs.com/blog/2145436/202404/2145436-20240426195220666-273587444.png)

}

例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 100%;
      background-color: aqua;
      height: 100vh;
    }

    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .son1 {
      width: 30%;
      background-color: rgb(241, 33, 33);
    }

    .son2 {
      width: 40%;
      background-color: rgb(155, 13, 13);
    }

    .son3 {
      width: 50%;
      background-color: rgb(73, 21, 21);
    }

    .son4 {
      float: right;
      width: 300px;
      background-color: rgb(82, 57, 57);
    }

    .son5 {
      float: right;
      width: 300px;
      background-color: rgb(134, 122, 122);
    }

    .block {
      height: 50px;
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="block"> 浮动盒子在包含块中排列时，会避开常规流块盒</div>
    <div class="son son2">2</div>
    <div class="son son3">3</div>
    <div class="son son4">4</div>
    <div class="son son5">5</div>
    <div class="block" style="margin-top: 20px;">常规流块盒在排列时无视浮动元素</div>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloremque placeat, at facilis officiis error
      blanditiis alias voluptas exercitationem possimus dicta qui dignissimos voluptatem nihil, praesentium dolorum!
      Maxime totam, commodi dolor ipsum unde molestias. Doloribus exercitationem voluptatum architecto omnis
      praesentium dolorem adipisci modi consequuntur quae explicabo quos eligendi id soluta voluptate dolores sit,
      necessitatibus ipsam illo maxime ad aliquam ratione nisi fugiat. Delectus temporibus, possimus, ex debitis iste
      similique aperiam velit repellat quasi ducimus pariatur omnis iure necessitatibus rerum quod. Ab in fuga
      laudantium dolorum quia obcaecati asperiores rem dolore aut saepe! Ex qui eveniet quia tempora porro, placeat
      quos laudantium mollitia rerum illum? Adipisci accusamus ab ad quam laudantium necessitatibus voluptatem rerum
      fugit placeat animi earum, delectus, est eveniet inventore maxime, repudiandae eum odio! Tempore totam natus
      dicta asperiores quos dolore. Voluptas, cumque soluta modi neque assumenda tempora odit facere ullam dicta
      inventore harum repudiandae in fuga tenetur maiores incidunt, consequuntur hic dolores! Consectetur assumenda,
      non perspiciatis iure quia fuga reiciendis aliquam sunt nihil ducimus molestias quisquam inventore optio amet
      recusandae vel ad omnis animi consequatur laborum. Deserunt, non deleniti, quia fugit aliquam tempora dolores
      soluta nulla eum asperiores fuga molestiae quidem ab blanditiis impedit. Ratione tempore autem ut!</span>
    <div class="son son1">1</div>
  </div>
</body>

</html>
posted @ 2024-04-26 20:19  冰凉小手  阅读(14)  评论(0)  编辑  收藏  举报