浮动布局

float

使用浮动可以控制相邻元素间的排列关系。

选项	说明
left	向左浮动
right	向右浮动
none	不浮动

浮动特性：

没有设置浮动的块元素是独占一行的。
浮动是对后边元素的影响，不会影响前边的元素，浮动的元素不占用空间位。
任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素，因此可以设置宽高。
多个元素都设置浮动后，会并排显示，总宽超出父元素宽才回换行。
清除元素浮动，需最后一个清除浮动的元素或者伪类元素被设置为块元素。

浮动元素边界不能超过父元素的 padding。

html

<style>
    main.love-show-float-padding {
        width: 400px;
        border: solid 2px black;
        overflow: auto;
        padding: 50px;
        background-color: antiquewhite;
        background-clip: content-box;
        div {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
        }
        div:first-of-type {
            float: left;
            border: solid 2px red;
        }
            div:last-of-type {
            float: right;
            background: green;
        }
    }
</style> 
<main class="love-show-float-padding">
    <div></div>
    <div></div>
</main>

清除浮动

clear

CSS 提供了 clear 规则用于清除元素浮动影响。

选项	说明
left	左边远离浮动元素
right	右连远离浮动元素
both	左右都远离浮动元素

清除两边浮动：

html

<style>
    div.love-clear-float-model {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
         &.green {
            border: solid 2px green;
            float: left;
        }
        &.red {
            border: solid 2px red;
            float: right;
        }
        &.blue {
            background: blue;
            clear: both;
        }
    }
</style>
<div class="love-clear-float-model green"></div>
<div class="love-clear-float-model red"></div>
<div class="love-clear-float-model blue"></div>

在父元素内部最后面添加一个没有高度的了元素，并使用clear:both 。
使用 ::after 伪类为父元素添加后标签，实现清除浮动影响，需要有content，并且变为块元素。
css
```
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
```
1
2
3
4
5
子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。
将会使用父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。

BFC机制

BFC（Block Formatting Context）是CSS中的一种渲染机制，它是一个独立的渲染区域，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响‌。

BFC的触发条件

根元素（html）
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除visible以外的值（hidden、auto、scroll）

应用场景包括：

解决外边距折叠问题
包含浮动元素
防止元素被浮动元素覆盖

形状浮动

通过形状浮动可以让内容围绕图片，类似于我们在 word 中的环绕排版。要求图片是有透明度的 PNG 格式。

显示区域

clip-path使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

选项	说明
circle	圆形
ellipse	椭圆
polygon	多边形

html

<style>
      span.love-float-shape-clip {
          float: left;
          width: 50px;
          height: 50px;
          padding: 10px;
          margin: 10px;
          border: solid 30px green;
          shape-outside: margin-box;
          clip-path: circle(50% at center);/*circle*/
          clip-path: ellipse(50% 80% at 100% 0);
          clip-path: polygon(50% 0, 100% 100%, 0 100%)
      }
  </style>
  <div style="width: 500px;">
      <span class="love-float-shape-clip"> </span>
      Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for
      Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses,
      would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace
      and security. It would be a further breach of international law, including the most fundamental principles of
      the UN Charter.
  </div>

Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses, would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace and security. It would be a further breach of international law, including the most fundamental principles of the UN Charter.

环绕模式

距离控制

通过shape-outside控制环绕模式。实际是通过定义元素实际环绕区域，文字沿环绕区域外围进行环绕。

选项	说明
margin-box	外边距环绕
padding-box	内边距环绕
border-box	边线环绕
content-box	内容环绕
circle	圆形环绕
ellipse	椭圆环绕
url	图片环绕，需是有透明度的png图片，JPG图片不可以。
polygan	多边环绕

html

<style>
    img.love-float-shape-clip-img {
        padding: 20px;
        float: left;
        border-radius: 50% !important;
        shape-outside: url(model.png);
        shape-outside: polygon(50px 0px, 0 100px, 100px 100px);
        shape-outside: ellipse(80px 40px) padding-box;
        shape-outside: circle(50%) padding-box;
    }
</style>
<div style="width: 500px;">
    <img src="https://plus.unsplash.com/premium_photo-1676299910876-747eeb0c11dc?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c3F1YXJlfGVufDB8fDB8fHww"
        alt="" width="100px" class="love-float-shape-clip-img">
    Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for
    Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses,
    would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace
    and security. It would be a further breach of international law, including the most fundamental principles of
    the UN Charter.
</div>

浮动布局 ​

float ​

清除浮动 ​

clear ​

BFC的触发条件 ​

应用场景包括： ​

形状浮动 ​

显示区域 ​

环绕模式 ​

距离控制 ​

浮动布局

float

清除浮动

clear

BFC的触发条件

应用场景包括：

形状浮动

显示区域

环绕模式

距离控制