1、浮动的元素脱标
标准流元素是区分行、块。
我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？
答：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素状态，也就是不区分行内元素和块级元素。
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:200px;height:200px;border:1px solid red;}div p{width:100px;height:100px;background:purple;}div span{width:100px;height:100px;background:orange;}</style></head><body><div><p>我是p标签</p><span>span标签</span></div></body>p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度。
div内部元素浮动之后
div p{width:100px;height:100px;background:purple;float:left;}div span{width:100px;height:100px;background:orange;float:left;}
需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动。
如果此时p标签和span标签都没有设置宽度和高度，元素的宽度会被内容撑宽，不会自动撑满父盒子。
div p{background:purple;float:left;}div span{background:orange;float:left;}2、依次贴边
如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，直到空余位置能够存放，从而进行贴边显示。
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:400px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{height:200px;background:blue;}div p.par3{background:yellow;}div p.par4{width:300px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>
如果父盒子的宽度不够，子盒子会依次贴边，但是如果前面元素中有空隙，当前需要贴边的元素不会钻空，不会出现钻空的现象，而之会查询剩余宽度实现依次贴边。
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:300px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>
如果某一个子盒子的宽度大于了父盒子，会有溢出状态。
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:650px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>
向右贴边的原理和向左相同，也是按照先后顺序进行贴边。
<style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:right;}div p.par1{height:250px;background:green;}div p.par2{width:100px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:100px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>3、浮动依次贴边练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}.outer{height:440px;width:940px;padding:10px;border:2px solid #000;margin:10pxauto;}.outer div{float:left;}.outer.box1{height:260px;width:300px;background:pink;}.outer.box2{height:260px;width:240px;background:cyan;}.outer.s_box{height:130px;width:200px;}.outer.box3{background:yellowgreen;}.outer.box4{background:greenyellow;}.outer.box7{height:180px;width:300px;background:blueviolet;}.outer.s_box2{height:180px;width:160px;}.outer.box5{background:purple;}.outer.box6{background:palegreen;}</style></head><body><divclass="outer"><divclass="box1"></div><divclass="box2"></div><divclass="s_box box3"></div><divclass="s_box box4"></div><divclass="s_box box4"></div><divclass="s_box box3"></div><divclass="box7"></div><divclass="s_box2 box5"></div><divclass="s_box2 box6"></div><divclass="s_box2 box5"></div><divclass="s_box2 box6"></div></div></body></html>4、浮动margin塌陷问题
标准流有margin塌陷的现象。
标准流：
浮动流：
总结：浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会相互塌陷；
5、浮动元素让出标准流
标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载。
浮动元素脱离了标准流，它会让后面的元素占有自己原来的位置，显示效果上来看仿佛是自己“飘”起来了，我们称之为脱标了。
标准流显示
此时粉色盒子浮动了
