CSS之浮动float

浮动

1.1 浮动的元素

在CSS中，浮动通过float属性实现。

取值： left | right | none
初始值：none
适用于：所有元素

浮动的元素会脱离常规文档流，但是，仍会对常规文档流的布局有所影响。使用浮动的一个独特之处就是：浮动的元素处于单独的平面上，但是对文档中的其他内容仍会有影响。
之所以这样是因为，对于文档中浮动的元素，其他内容会围绕浮动的元素流动。

在这里插入图片描述

可以看到，最后一个段落的内容围绕浮动元素流动。

注意：浮动元素的外边距不会发生折叠。对于非置换元素，要设置其width值。否则，元素的宽度为仅仅可容纳文本的大小.

div {
            /*width:500px;*/
            height:300px;
            border:1px solid red;
            margin:auto;
            float:right;
        }
    <div>
    <p>计算机科学</p>
    </div>

在这里插入图片描述

1.2 浮动详解

深入了解浮动之前，要理解容纳块的概念。浮动元素的容纳块即为浮动元素的最近块级祖元素。此外，不论什么类型的标签，设置为浮动后，均为块级标签。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            width:500px;
            height:500px;
            border:1px solid red;
            margin:auto;
            /*float:right;*/
        }
        .float {
            float: right;
            border:1px solid blue;
            width:100px;
            height:100px;
            line-height: 50px;
        }
    </style>
</head>
<body>
        <div>
            <p>计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学计算机科学与技术与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术</p>
            <!-- <p>计算机科学</p> -->
            <p >计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学计算机科学与技术与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术</p>
            <span class="float">12455666</span>
            <p>计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学计算机科学与技术与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术</p>
        </div>
</body>
</html>

在这里插入图片描述

正常来说，span作为行内标签，对其设置width和height会无效，但是设置为浮动后却有效果，因此证明了其为块级元素。

浮动元素的位置有一系列的规则约束，下面为简单几个：

浮动元素的左（右）外边界不能超过容纳块的左（右）内边界。

所有的元素正常情况下，均是位于父元素盒模型中的content中。毕竟子元素也是父元素的内容嘛。
为避免浮动元素的互相遮盖，若一个向左浮动元素的左边已存在一个浮动元素，那么该浮动元素将仅靠左边浮动元素的右外边界。右边同理。反之，若一个浮动元素的浮动方向一侧无其他浮动元素，则该浮动元素仅靠容纳块的相应的内边界。
左浮动元素的由外边界不能在有浮动元素左外边界的右侧。右浮动元素的左外边界不能在左浮动元素右外边距的左侧。
浮动元素的顶边不能超过父元素的内顶边高。如果浮动元素在两个折叠外边距之间，那么在两个元素之间放置它的位置时，将视其有个块级父元素
仍以上面的例子：当我们把浮动元素p放在两个p元素之间时，由于浮动元素位于两个折叠外边距之间，因此将视其有个块级父元素。这是为了避免浮动元素一直往上移动
浮动元素的顶边不能超过前面的任何一个浮动元素或块级元素。
避免浮动元素一直往上移动超出父元素的顶边
浮动元素的顶边不能高于文档源码中出现在浮动元素之前的元素生成的框体所在的行框顶边。
进一步限制浮动元素的上移

<html>
<head>
  <title></title>
  <style type="text/css">
      * {
          margin:0;
          padding:0;
      }
      div {
          width:500px;
          height:500px;
          border:1px solid red;
          margin:auto;
          /*float:right;*/
      }
      .float {
          float: right;
          border:1px solid blue;
          width:100px;
          height:100px;
          line-height: 50px;
          display:auto;
          /*margin-top:100px;*/
      }
  </style>
</head>
<body>
      <div>
          <p>计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与<span class="float">12455666</span>技术计算机科学计算机科学与技术与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术计算机科学与技术</p>
      </div>
</body>
</html>

在这里插入图片描述

可以看到，位于段落中的span设置为浮动后，顶边并没有超过他所在的那一行的行框。

在CSS中，对于每一行文本，均会生成一个行框，其高度主要受line-height的影响。

浮动元素不会超出容纳块的边界，除非浮动元素太宽，容纳元素放不下。若两个浮动元素排布在一起会超过边界，则会发生“换行”。

1.3 浮动元素与内容折叠

CSS规定：

行内框与浮动元素重叠时，其边框、背景与内容都在浮动元素“之上”渲染

块级框与浮动元素重叠时，其边框、背景在浮动元素“之后”渲染，其内容在浮动元素“之上”渲染。

.image {
            width: 50px;
            height: 200px;
            float: left;
            margin:10px -15px 10px 10px;
        }
        p {
            width:400px;
            background: pink;
            border:1px solid black;
            padding:.5em;
        }
        span {
            background: blue;
            border:3px double green;
            padding:2px;
        }
        
<img src="C:\Users\lenovo\Desktop\bai.jpg" class="image">
        <p>计算机科学与术计算机科学与技术计算机科学与技术计算机科与技术计算机科学与技术<span>1212896124873</span>计算机科学与技术计算机科学与技术计算机科学与技术计算机科与技术</p>

在这里插入图片描述

可以看到，行内元素和块级元素与浮动元素的排布正如上面所述。

2. 清除浮动

clear
取值：left | right | both | none
初始值： none
适用于块级标签

p {  clear:left; }

这个样式规则可以理解为：确保p的左边远离浮动图像，同理right 和both分别指右边、两边远离浮动图像。
仍以上面的为例：

p {
            width:400px;
            background: pink;
            border:1px solid black;
            padding:.5em;
            clear:left;
        }

在这里插入图片描述

清除浮动原理
清除浮动时，会给设置清除浮动的元素的上方增加间距，从而使元素向下移动。但是，清除浮动的元素的外边距不会发生变化。间距就是为了使元素下移，确保显示在浮动元素的下方而在元素上外边距外增加的一块空白。

在这里插入图片描述

时刻要注意：浮动框的边界由浮动元素的外边距的边界划定。（记住CSS盒模型）

3. 定义形状

3.1 定义形状

CSS可以设置浮动元素周围的内容的流动形状。

shape-outside
取值： none | [< basic-shape> || < shape-box>] | < image>

< basic-shape> 和 < shape-box>的类型如下：
basic-shape：

inset()
circle()
ellipse()
polygon()

shape-box:

margin-box
border-box
padding-box
content-box
默认使用外边距框。
对于basic-shape而言，需要四个参数，分别对应浮动元素的上、右、下、左。
inset(): 浮动元素各边向内偏移的距离。内凹形状有个特殊之处，计算内偏移时可以为元素设置圆角。语法为： shape-outside: { inset(10% round 5px)} 会设置一个5px的圆角。也可以是椭圆角，例如：宽为10px 高位20px： shape-outside: { inset(10% round 10px/20px)}

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       * {
           margin:0;
           padding:0;
       }
       div {
           width:500px;
           height:300px;
           border:1px solid red;
           margin:auto;
           display: inline-block;
       }
       .image {
           width: 100px;
           height: 100px;
           float: left;
           margin:20px;
           shape-outside: inset(10px round 10px) content-box;
       }
       .image2 {
           width: 100px;
           height: 100px;
           float: left;
           margin:20px;
           shape-outside: inset(10px round 70px/90px) content-box;
       }
       p {
           width:400px;
           background: pink;
           border:1px solid black;
           padding:.5em;
           margin-top:0px;
       }
       span {
           background: blue;
           border:3px double green;
           padding:2px;
           
       }
   </style>
</head>
<body>
   
       <div>
           <img src="C:\Users\lenovo\Desktop\bai.jpg" class="image">
       <p>计算机科学与术计算机科学与技术计计算机科学与术计算机科学与技术计算机科学与技术计算机科算机科学与技术计算机科与技术计算机科学与技术<span>1212896124873</span>计算机科学与技术计算机科学与技术计算机科学与技术计算机科与技术</p>
       </div>
       <div>
           <img src="C:\Users\lenovo\Desktop\bai.jpg" class="image2">
       <p>计算机科学与术计算机科学与技术计算机科学与技术计算机科计算机科学与术计算机科学与技术计算机科学与技术计算机科与技术计算机科学与技术<span>1212896124873</span>计算机科学与技术计算机科学与技术计算机科学与技术计算机科与技术</p>
       </div>
       

</body>
</html>

在这里插入图片描述

circle() 和 ellipse()
在circle()中，要定义一个半径，和中心点的位置（默认为center）
可以有的取值有以下：
1. circle(10px)
2. circle(10px at center)
3. circlr(10em at 30% 50%)
4. circle(closest-side at top left) (closest-side\farthest-side)

在ellipse()中，要定义两个半径（x轴、y轴）取值规则与上面的类似

在这里插入图片描述

多边形polygon()
多边形形状由一系列逗号间隔的x-y坐标定义，值可以是长度或是百分数，相对形状框的左上角计算。

在这里插入图片描述