CSS float浮动布局

属性值

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

float是最开始出现的一种布局方式，主要解决：文本在图像周围环绕，也即应用于图像。但是在css中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。

元素一般是处于普通流中，也即块级元素独占一行，从上往下依次显示布局。行级元素可以在一行显示多个，按照顺序进行显示布局。

而添加了float布局的元素则会脱离原来所在的文档流。并‘漂浮’在当前所在的文档流的位置（如果前一个元素没有添加float布局的情况下），由于当前元素文档流实际上没有被元素占用，因此当前元素之后的元素会按照普通流布局的方式，占用当前元素的文档流。表现为：丢失空间

也即：

<div></div>
<div></div>

<style>
div {
    width: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    width: 300px;
    float: left;
    border: 1px solid red;
}

div:nth-of-type(2) {
    height: 300px;
    background: linear-gradient(90deg,blue,darkblue);
}
</style>

此时由于第一个元素添加了float:left，则脱离了原来的文档流，后面元素会向上移动，占用第一个元素的空间。

如果第二个元素也添加了float，那么可以这样去思考，由于第一个元素的原因，第二个元素所处的文档流变成了第一个元素所处的文档流，此时再给第二个元素添加float，那么也会像第一个元素一样，脱离当前的文档流，使得当前元素和第一个元素一样处于'漂浮'状态，并紧跟着第一个元素显示一排。

同样，如果第二个元素后面还有其他元素，那么也会向上移动，改变原来所处的文档流位置。

注意：添加了float的元素，只是在会脱离当前所在的文档流，但是仍然漂浮在当前文档流上一层，而不是说直接脱离整个文档流，跑到所有文档流的最顶部。

从上面案例可以看出，添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流，且父盒子没有添加高度属性，那么父盒子无法感知到子盒子的存在，因此父盒子不会被撑开。

<div class="box">
    <div></div>
</div>

<style>
.box {
    border: 1px solid red;
}

.box div {
    float: left;
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg,wheat,yellow);
}
</style>

1. 清除浮动

知道了float带来的不好的地方，则需要去清除浮动带来的影响。

方法一：采用css clear属性

属性值	说明
none	元素不会向下移动清除之前的浮动
left	元素被向下移动用于清除之前的左浮动
right	元素被向下移动用于清除之前的右浮动
both	元素被向下移动用于清除之前的左右浮动

将该属性添加在被浮动影响的后面元素，即可以清除浮动

<div></div>
<div></div>

<style>
div {
    width: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    float: left;
    background: linear-gradient(45deg,red,blue);
}

div:nth-of-type(2) {
    clear: both;
    background: linear-gradient(45deg,wheat,greenyellow);
}
</style>

则受浮动影响的元素就可以正常显示了

因此在受浮动影响的父元素，就可以利用此方法，在浮动元素之后新增加一个元素，使新增加的元素清除浮动，这样新增加的元素的位置就在浮动元素的下面，使得在一定程度上实现了撑开盒子的作用。

• 添加新标签

  <div class="box">
      <div></div>
      // 新增加的标签
      <p class="clearfix"></p>
  </div>
  
  <style>
  .box {
       border: 1px solid red;
   }
  
  .box div {
      float: left;
      width: 200px;
      height: 200px;
      background: linear-gradient(90deg,wheat,yellow);
  }
  
      // 清除浮动
  .clearfix {
      clear: both;
  }
  </style>
  

  由于每次都需要新增加一个标签，因此不建议使用

• 使用伪类的方式添加元素

  <div class="box">
      <div></div>
  </div>
  
  <style>
  .box {
       border: 1px solid red;
   }
  
  .box div {
      float: left;
      width: 200px;
      height: 200px;
      background: linear-gradient(90deg,wheat,yellow);
  }
  
      // 在父盒子之后添加元素
  .box::after {
      content: "";
      clear: both;
      display: block; // 必须表现为块级元素才行
  }
  </style>
  

  方法二：BFC

  其次还可以采用BFC，使得父元素形成独立的空间，也即可以感知子元素的高度和宽度，在一定程度上也不会影响外面的元素的布局。

• BFC

  <div class="box">
      <div></div>
  </div>
  
  <style>
  .box {
       border: 1px solid red;
       overflow: hidden; // 触发BFC
   }
  
  .box div {
      float: left;
      width: 200px;
      height: 200px;
      background: linear-gradient(90deg,wheat,yellow);
  }
  
  </style>
  

2. 浮动边界

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

<div class="box">
    <div></div>
</div>

<style>
.box {
    width: 300px;
     border: 1px solid red;
     padding: 30px;
     overflow: hidden;
 }

.box div {
    float: left;
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg,wheat,yellow);
}

</style>

3. 浮动转换

元素浮动后会变为块元素包括行元素如 span，所以浮动后的元素可以设置宽高。

4. 形状浮动 控制环绕模式

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

shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边框，shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

理解：使用形状值来定义浮动区域的浮动，这将使得内联内容会环绕着形状，而不是产生浮动的边框。

关键字属性值

属性值	说明
none	该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的margin box
margin-box	定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的border-radius和margin 的值决定。
border-box	定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。
padding-box	定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。
content-box	定义一个由内容区域的外边缘封闭形成的形状。

函数值属性

属性值	说明
circle([circle-radius] [at position])	定义一个由圆形指定的包装形状（不改变原来的元素形状，只改变相邻内联元素的环绕方式），circle radius是形状的半径，at position是圆心的位置（不写默认在中心），属性值可以是px或者百分比
ellipse( [<shape-radius>{2}]? [at <position>]? )	定义一个由椭圆指定的包装形状，shape-radius指定椭圆的长半轴，at position指定圆心的位置，如果是一个值则表示圆心取相同的值，两个值表示分别在x y上取值
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )	定义一个由多边形指定的包装形状，参数由多组(x,y)组成，指定多边形的各个角的坐标。从而形成不规则环绕形状。
inset( <shape-arg>{1,4} [round <border-radius>]? )	控制环绕向内移动的距离。也即浮动文字按照：上 右 下 左 在浮动元素上的偏移量得出的矩形边缘进行围绕。比如：pt:表示包装形状的上边距位于元素上外边缘的偏移位置。也即实现了环绕向内移动的效果。

url值

shape-outside: url(imageUrl);

文字通过给定的图片，并且通过计算图片的透明度后获取的形状区域进行围绕，这里需要注意的是此效果必须在服务器端预览，本地预览会报图片跨域问题，给定的图片必须是有透明区域的图片

渐变值

shape-outside: linear-gradient;

按照给定的渐变通过计算排除透明通道后得到的形状，然后文字按照此形状的边缘进行环绕

最后：函数值/url/linear-gradient可以和关键字属性值搭配使用，此时关键字属性作为基本形状提供相应的参考框盒。

5. 改变元素的显示区域

clip-path使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。且此方式原来的区域仍然存在，只是显不显示的问题。裁剪之后只有规定的区域可以显示。

基本语法

clip-source | basic-shape | geometry-box | none

其中：

• clip-source: 用url表示裁切元素的路径

• basic-shape：一种形状，其大小和位置由几何盒值定义。如果没有指定几何框，则边框将用作参考框

  • inset
  • circle
  • ellipse
  • polygon

  以上的函数值的使用和shape-outside中函数值的使用方式是一样的。且使用以上方式，可以任意指定裁切形状。

• geometry-box：几何盒，如果同 <basic-shape>一起声明，它将为基本形状提供相应的参考框盒。

  • margin-box

    使用margin-box作为引用框

  • border-box

  • padding-box

  • content-box

  • fill-box

    利用对象边界框作为引用框

  • stroke-box

    使用笔触边界框作为引用框。

  如果单独使用以上方式，和使用basic-shape相比裁切的形状有一定的局限性。如果和basic-shape一起声明，那么会作为基本形状作为参考，比如：inset内移方式，可以通过指明基本形状来创建裁切形状。