快速学习CSS浮动（一）加油??-一一网

这是我参与更文挑战的第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.包裹性（包裹与自适应相结合）

动画.gif

   <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自适应的体现

动画1.gif

   <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

动画2.gif
3.破环文档流

父元素高度塌陷

动画3.gif

    <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。
复制代码

动画7.gif

4.不会出现 margin 合并

动画5.gif

    <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>
复制代码