这是我参与更文挑战的第5天，活动详情查看： 更文挑战
前言📢
css浮动：“我只是一个为实现文字环绕而设计的属性，你却让我做好多的事情，肯定会有所谓的问题了”😶
程序员🤦🏻♂️：“时代赋予你的责任，你逃不掉的。。。”
学习目标：真正的理解float的特性，以及它的周边知识。使我们不在有模糊的印象
开始学习了（🏃♂️大约5分钟）
1.float是什么？（What）🌙
css的一种属性、多用于网页排版，主要属性值为：
left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动）
与此对应清除浮动（方法多样：BFC、 伪元素：after等自查）：
{
clear: both; //两侧抗浮动
clear: none;//默认值，左右浮动来就来
clear: left;//左侧抗浮动
clear:right;//右侧抗浮动
}
2.float的几个常见特性（图文理解）☀
1.包裹性（包裹与自适应相结合）
<style>
.box { width: 200px; background: #eee;}
.float { float: left; background: red;}
.float img { width: 128px; }
</style>
<div class="box">
<div class="float">
<img src="1.image" alt="" srcset="">
</div>
</div>
1.1自适应的体现
<style>
.box { width: 200px; background: #eee;}
.float { float: left; background: red;}
.float img { width: 128px; }
</style>
<div class="box">
<div class="float">
<img src="1.image" alt="" srcset="">雾灵欢迎你喝彩🎉🎉🎉🎉🎉🎉🎉🎉🎉
</div>
</div>
2.块状化并格式化上下文
块状化现象：一旦元素的float不为none，则display的值就是block或者table
3.破环文档流
父元素高度塌陷
<style>
.box { width: 200px; background: #eee;border: 1px solid;}
.float { float: left; }
.float img { width: 128px; }
</style>
</head>
<body>
<div class="box">
<div class="float">
<img src="1.image" alt="" srcset="">雾灵欢迎你喝彩🎉🎉🎉🎉🎉🎉🎉🎉🎉
</div>
</div>
使用BFC😊
BFC全称为 block formatting context，中文为“块级格式化上下文”（对应Ifc）
对它的认识就是BFC内部的子元素不会影响到外部的元素。（因此margin重叠可以创建BFC解决。也可以解决父元素的高度塌陷）
3.加餐一波（如何创建BFC呢？）🍴
根元素；
float 的值不为 none；
overflow 的值为 auto、scroll 或 hidden；
display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
position 的值不为 relative 和 static。
4.不会出现 margin 合并
<style>
.box { width: 200px; background: #eee;border: 1px solid;}
.float { float: left; }
.box1,.box2{
margin: 10px;
}
.box1{background: lightcoral;}
.box2{background: gray;}
.box1 img,.box2 img { width: 128px; }
.box1{float: left;}
</style>
</head>
<div class="box">
<div class="box1">
<img src="1.image" alt="" srcset="">雾灵欢迎你喝彩🎉🎉🎉🎉🎉🎉🎉🎉🎉
</div>
<div class="box2">
<img src="1.image" alt="" srcset="">雾灵欢迎你喝彩🎉🎉🎉🎉🎉🎉🎉🎉🎉
</div>
</div>
注意🧨：是不是也想到了css层叠顺序呢！😀css层叠顺序
4.float适用于哪些场景?(Where)⭐
- 圣杯布局，双飞翼布局，多列布局
- 网页布局
- 文字环绕
5.float产生的原因？（Why）🌌
⌚最初仅仅只是为了实现文字环绕
⏰后来成为网页上创建多列布局的最常用工具之一
未完待续 。。。
参考资料📃
《css世界》 第6张 流的破坏与保护
