一文搞懂浮动原理

[youdeliang]

前言

CSS中正常的流内容或者流布局虽然也足够强大，但是有时候我们希望有一些特殊的布局表现，例如，文字环绕效果，或者元素固定在某个位置，要实现这样的效果，正常的流就有些捉襟见肘。因此，CSS中有float属性，专门通过破坏正常的“流”来实现一些特殊的样式表现。当然，既然有破坏，就有保护其他元素不被破坏的clear属性，本章就来介绍 CSS的float和clear属性。

浮动是什么？

W3school中给出的浮动定义:浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的本质和特性？

浮动的本质：一句话解释，浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就 是文字环绕图片显示的效果。

浮动的特性：

• 包裹性

所谓包裹性，由包裹和自适应性两部分组成。

1. 包裹:假设浮动元素父元素宽度200px，浮动元素子元素是一个128px宽度的图片， 则此时浮动元素宽度表现为包裹，就是里面图片的宽度128px。
2. 自适应性：如果浮动元素的子元素不只是一张128px宽度的图片，还有一大波普通的文字，则此时浮动元素宽度就自适应父元素的200px宽度，最终的宽度表现也是200px。

• 块状化并格式化上下文

块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。ps：格式化上下文将在另一篇文章详细分析

• 破坏文档流
• 没有任何margin合并

浮动的作用机制

在了解浮动作用机制之前，我们首先需要了解两个和float相关的术语，一是浮动锚点（float anchor），二是浮动参考（float reference）。

• 浮动锚点:是float元素所在的“流”中的一个点，这个点本身并不浮动，就表现而言更像一个没有margin、border和padding的空的内联元素。
• 浮动参考：指的是浮动元素对齐参考的实体。

下面我们用简单的例子来理解这两个概念：

// HTML
 <h1>我是一个很长的内容可以实现换行<a href="">更多</a></h1>
 
 <h1>我是一个很长的内容可以实现换行占两行<a href="">更多</a></h1>
 
 // CSS
a {
  float: right;
  color: blue;
}
h1 {
  width: 150px;
  border: 1px solid black;
}

效果图：

相信大家看一眼代码和效果图应该也没啥疑问了，感性认知这样写就会出现这样的效果，但是如果我问大家具体的作用机制是什么，恐怕鲜有人能回答出来。

通过最简单的例子来理解透彻背后的作用机制，相信是每个人学习的目标跟重点了，现在让我们了解下浮动的作用机制：

1. 首先，我们可以将浮动参考理解为行框盒子，浮动元素在当前行框盒子内定位。而每一个内联元素都有一个行框盒子。
2. 第一张图片中由于文字比较多，分成两行显示，因此有上下两个行框盒子，而更多是在文字最后，位于第二行。上面设置了float:right的a元素是相对于第二行的行框盒子对齐的, 然后向右浮动。
3. 第二张图片中，我在标题中在多加几个字，正好两行，，如果float元素前后全是块元素，那根本没有行框盒子,但是奇怪的是更多两字自己跑到第三行。何来的对齐说法？这里就涉及前面提到的两个概念中的浮动锚点了。
4. 浮动锚点其作用可以理解为产生行框盒子，因为浮动锚点表现如同一个空的内联元素，有内联元素自然就有行框盒子，于是，float元素对齐的参考实体行框盒子对于块状元素也同样适用了，只不过这个行框盒子由于没有任何内容，所以无尺寸，看不见也摸不着罢了。

clear属性是什么？

浮动元素可能会造成父元素高度塌陷的问题，所有清楚浮动就显得非常重要了，在介绍清除浮动方式之前，首先要先了解清楚浮动的clear属性

CSS有一个专门用来处理float属性带来的高度塌陷等问题的属性，这个属性就是clear。其语法如下：

clear: none | left | right | both 

• none：默认值，左右浮动来就来。
• left：左侧抗浮动。
• right：右侧抗浮动。
• both：两侧抗浮动。

注意：

1. 凡是clear:left或者clear:right起作用的地方，一定可以使用clear:both替换！所以我们平时看到的都是clear:both这个声明比较多。
2. clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

.clear:after {   
    content: '';   
    display: table;   // 也可以是'block'，或者是'list-item'   
    clear: both; 
} 

清除浮动

方式1：利用伪元素（clearfix）清浮动

HTML结构如下，在父div上再添加一个clearfix类：

<div class="parent clearfix">
    <div class="child"></div>
</div>

样式应用如下：

     .parent {
        border: 1px solid;
      }
      .child {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
     /*开启haslayout*/
      .clearfix {
        *zoom: 1;
       }
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;
      }

给浮动元素的父容器添加一个clearfix，然后给这个class添加一个:after伪元素，实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案，推荐使用。

方式2：利用clear:both清浮动

通过在父元素最后添加一个div标签，并且给他添加clear：both属性值。需要注意在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

<div class="parent">
    <div class="child"></div>
    <div class='clearfix'></div>
</div>

样式应用如下：

      .parent {
        border: 1px solid;
      }
      .child {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      .clearfix {
        clear:both
      }

方式3：利用br标签清浮动

HTML结构中，在父元素里面最后加入br标签，并且添加clear=“all”属性值

<div class="parent">
    <div class="child"></div>
    <br clear="all">
</div>

样式应用如下：

      .parent {
        border: 1px solid;
      }
      .child {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

方式4：利用overflow:hidden清浮动

这种方式让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

<div class="parent clearfix">
    <div class="child"></div>
</div>

样式应用如下：

     .parent {
        border: 1px solid;
        overflow: hidden;
      }
      .child {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

这里可以给父元素设置overflow:auto也可以，但是为了兼容IE最好使用overflow:hidden。

注意：还有一种是直接给父元素设置高度height，但是实际使用不大可能给所有的盒子加高度，也不推荐使用，知道有这种方式即可。如果感兴趣可以去查阅了解即可。

最后

希望本文对你的学习有所帮助，如果喜欢的话，欢迎点赞、关注一波。大家加油！

更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！

相关文章

• 《CSS世界》-张鑫旭
• 如何清除浮动