【前端CSS部分】重新认识浮动float

1、浮动产生的背景

1-1、为什么会出现浮动呢？

  浮动最初出现的时候只是为了实现文字环绕图片的效果。并没有想过它可以应用于我们现在的页面布局中。

1-2、文字环绕图片的原理

  在没有设置浮动的时候，元素可以通过自身的宽高值，将盒模型中的父元素的宽高给撑开。
  元素设置浮动之后，破坏了其inline boxes模型，失去了高度，使得其他inline boxes可以围绕浮动元素重新排列。而包裹它的父元素就不会被该元素撑开了。

2、浮动的本质

  浮动的本质就是包裹性和破坏性。下边详细解释什么是包裹性，什么是破坏性：

2-1、包裹性

  元素的包裹性就是说父元素的width值会收缩到与内部元素宽度一样，包裹只是让元素的水平空间收缩。
  常见的具有包裹性的元素：absolute、fixed、float、inline-block、inline-flex、table-cell；这些元素都有一个共同的特性：会产生BFC（块级格式化上下文）。【至于什么是BFC，请查看：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 】

  举个例子来说：div标签，是一个块级元素，当我们没有给该元素设置float:left/right时，它默认的宽度值是100%，即独占一行；但是，如果我们设置了float属性之后，它的宽度值就会与其包裹的内部元素的宽度值一样。

  具体效果如下：

  1>、没有设置float属性时

#parent {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
}
img {
    width: 30px;
    height: 30px;;
}
<div id="parent">
    <img src="test.png" alt="...">
    <span class="c">当父元素div没有浮动时</span>
</div>

  2>、设置float属性时

#parent {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    float: left;
}
img {
    width: 30px;
    height: 30px;;
}
<div id="parent">
    <img src="test.png" alt="...">
    <span class="c">当父元素div浮动时</span>
</div>

2-2、破坏性

  破坏性就是指破坏了元素的line boxes。要想理解破坏性，我们只要搞清楚文字可以环绕图片的原理即可。要了解破坏性，我们首先需要掌握两个知识点：line boxes和inline boxes。

2-2-1、什么是inline boxes?

  我理解的inline boxes指的就是我们常见的行级元素和文本内容；这些元素通常会排成一行，如span、input这些元素就是有名的inline boxes，文字内容就是匿名的inline boxes。

2-2-2、什么是line boxes?

  line boxes就是由inline boxes组合起来的行盒子。line boxes的高度值是由其内部最高的inline boxes的高度值决定的。

  结合实际例子来说明：有两个img标签，height值分别为60px和30px，line boxes的最大高度就是由其内部最高的inline boxes的高度值决定的。

#parent {
   border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
}
#img1 {
    width: 30px;
    height: 30px;;
}
#img {
    width: 60px;
    height: 60px;
}
<div id="parent">
    <img id="img" src='test.png'/>
    <img id="img1" src="test.png" alt="...">
    <span class="c">当父元素div没有浮动时</span>
</div>

2-2-3、文字环绕图片的原理

  图片和文字都属于同一box类型的元素，默认情况下，一张图片只能与一行文字对齐，如果想要让一张图片与多行文字对齐，我们只能破坏inline boxes模型了。

  当给一个图片元素设置了浮动之后，该元素本身的inline boxes模型被破坏，与文字就不属于同一box类型了，这个时候，图片会从line boxes模型中脱离出来，按照自己的方式排列；而line boxes由inline boxes组成，inline boxes模型被破坏之后，元素本身失去了其高度值，所以line boxes也就失去了高度值。

  上述两种结果的产生恰恰给文字环绕图片创造了必要条件。

  inline boxes是高度形成的基础，浮动破坏了inline boxes模型，也就没有高度可言了。正是由于浮动元素没有了inline boxes，也就失去了高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列。

3、如何清除浮动产生的影响

3-1、使用空标签清除浮动

  这个做法的好处是兼容性强，但是添加了多余的标签，造成了浪费

<div class="clear"></div>
.clear {
	clear: both/left/right;
	height: 0;
	overflow: hidden;
}

3-2、使用<br>空标签清除浮动

  与使用div标签清除浮动的方式一样

<br clear="both"/>

3-3、给父元素也设置浮动属性

  只是清除了当前浮动带来的影响，但是会给与父元素同级的元素带来新的影响，容易出问题

<div id="parent">
	<div id="child"></div>
</div>
#parent {
	float: left;
}
#child {
	float: left;
}

3-4、设置父元素的display为inline-block

  导致父元素无法使用margin：0 auto；实现居中

3-5、overflow + zoom方法

  overflow: hidden;会导致溢出的元素被截断

.clearfix {
	overflow: hidden; 
	zoom: 1;
}

3-6、使用after伪类清除浮动

  推荐做法

.clearfix{
	zoom:	1;
}
.clearfix:after {
	display: block; 
	content: 'clear'; 
	clear: both; 
	line-height: 0; 
	visibility:hidden;
}

---

推荐阅读：
https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/
https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
https://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/