CSS的浮动
浮动式CSS里面的重中之重
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
浮动属性
u Float，浮动属性名，如：float: left; 向左浮动
n Left ， 向左浮动
n Right， 向右浮动
说明：
1. 浮动元素浮动，后面元素会受到影响，跑到它下面
2. 给元素全部浮动会并排显示（注：父元素宽度不够会另起一行）
u clear，清除浮动，如：clear: both;
n Left ， 清除左浮动
n Right， 清除右浮动
n Both; 清除所有浮动（推荐用）
说明：
1、 元素需要向左浮动，就给该元素添加float属性，float：left;
2、 元素需要向右浮动，就给该元素添加float属性，float：right;
3、 浮动元素不会影响前面的元素，它会影响后面的元素
4、 后面元素受到影响，我们需要说明：清除浮动，那么就给该元素添加属性，clear:both;
原本的三个块标签都是放在一排的
<style> .div1{ width: 100px; height: 100px; background-color: blue; } .div2{ width: 100px; height: 100px; background-color: aqua; } .div3{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body>
第一个块浮动看看效果
<style> .div1{ width: 100px; height: 100px; background-color: blue; float: left; -- 浮动第一个块 } .div2{ width: 100px; height: 100px; background-color: aqua; } .div3{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body>
看到上面的图我们可以看到第二个的块消失了，这个是什么原因呢？我们来把这三个块想象下是三维的
原本他们三个是在一起的都是一条线的，浮动之后就是三维的然后第一个飘起来了 然后第二个去到了第一个原本的位置然后第三个去了第二个的位置 ，
第一个漂浮起来的时候刚好罩住了原来的第一个的样式，所以第二个漂浮到第一个原来的位置就被遮挡住了
把你的块儿元素颜色放在同一行：（那就要都漂浮起来）
<style> /*浮动起来让你的颜色都在同一样*/ .box1{ width:100px; height:100px; background-color: darkgreen; float:left; } .box2{ width:100px; height:100px; background:blue; float:left; } .box3{ width:100px; height:100px; background-color: red; float:left; } </style> </head> <body> <div id="wrap"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body>
效果：
我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。
其实就是后面的浮动就会和第一个一起显示了，然后浮动的后面的就会顶替它的位置，然后第三个就跑到了第二个的位置就会被覆盖住不显示了
那么浮动如果大家想学好，一定要知道它的四大特性
1.浮动的元素脱标（脱离标准流）
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
浮动元素脱标
脱标：就是脱离了标准文档流
看例子
<title>Document</title> <style> .box1{ width:200px; height:200px; background-color: red; float:left; } .box2{ width:400px; height:400px; background:yellow; /*float:left;*/ } span{ width:300px; height:50px; background:green; float:left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span></span> </body>
效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。
原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。
原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
也就是一个行内标签你要式想进行设置宽高 那么你就需要进行浮动脱离了 标准流 然后就可以设置宽高了
浮动元素互相贴靠
看例子
<style> .box1{ width:100px; height:400px; background-color: red; float:left; } .box2{ width:150px; height:450px; background:yellow; float:left; } span{ width:300px; height:300px; background:green; float:left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span></span> </body>
效果：
效果发现：
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
浮动元素字围效果
<title>Document</title> <style> *{ /*为了顶格显示*/ margin: 0; padding:0; } div{ float:left; } </style> </head> <body> <div> <img src="../泷泽萝拉.jpg" alt=""> </div> <p> 奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸 </p> </body>
效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
这就是字体把图片给包围住了的效果
浮动元素紧凑效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
<title>Document</title> <style> div{ float:left; background:red; } </style> </head> <body> <div> 老王 </div> </body>
效果：
大家看最后的显示就是这样 就是浮动的就是字体的大小
大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，
清楚浮动：
为什么要清除浮动
如果我们不清楚浮动，那么你想要的浮动的效果得到了，但是你不想要后面的也会跟着浮动的
在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）
大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。
看一个效果：
<style> *{ padding:0; margin:0; } .father{ width:1126px; } .box1{ width:200px; height:500px; background-color: red; float:left; } .box2{ width:300px; height:200px; background:green; float:left; } .box3{ width:400px; height:100px; background:blue; float:left; } .father2{ width:1126px; height:600px; background:purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body>
效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。（就是后面不想要的浮动也会随着前面的浮动而浮动）
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动
大家别怕我们是可以清除浮动带来的影响的：
我们有多种清除浮动的方法，在这里给大家介绍四种：
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow：hidden
给父盒子设置高度
这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
clear：both
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
<style> *{ padding:0; margin:0; } .father{ width:1126px; } .box1{ width:200px; height:500px; background-color: red; float:left; } .box2{ width:300px; height:200px; background:green; float:left; } .box3{ width:400px; height:100px; background:blue; float:left; } .father2{ width:1126px; height:600px; background:purple; } #clear{ /*它不浮动后面的也无法浮动*/ clear:both; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div id="clear"></div>/*定义一个空div是为了清空浮动*/ <div class="father2"></div> </body>
这个就好比在浮动的后面第一个元素不让它浮动后面的也就无法跟着浮动了
伪元素清除法(常用)
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
（就是在你浮动的区域的父级定义的类中设置就可以在浮动过后清空浮动了）
<style> *{ padding:0; margin:0; } .father:after{ /*在父级内清空浮动,after就是添加最后 ,等你的浮动都结束再清空*/ width:1126px; content:'.'; clear:both; display:block; } .box1{ width:200px; height:500px; background-color: red; float:left; } .box2{ width:300px; height:200px; background:green; float:left; } .box3{ width:400px; height:100px; background:blue; float:left; } .father2{ width:1126px; height:600px; background:purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body>
after之后清空浮动并且示你阻塞的浮动，就是让你的阻塞生效
新浪首页推荐伪元素清除法的写法
/*新浪首页清除浮动伪元素方法*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
<style> .clearfix:after{/*在浮动最后面加上清空内容*/ content:'.'; /*这个是标准用法*/ display:block; /*不论是不是块元素先转化为块元素*/ clear:both;/*然后清空浮动*/ visibility:hidden; /*然后把责怪框给隐藏了*/ } </style>
overflow:hidden(常用)
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
overflow:hidden(常用)
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，大家一定要熟记于心。
直接设置再你的浮动的父级中就和上面的一样的使用只不过方法不同而已
.father{ /*直接这样设置在浮动的父级中*/ width:1126px; overflow: hidden; } .box1{ width:200px; height:500px; background-color: red; float:left; } .box2{ width:300px; height:200px; background:green; float:left; } .box3{ width:400px; height:100px; background:blue; float:left; } .father2{ width:1126px; height:600px; background:purple; } /*body{*/ /*overflow: hidden;*/ /*}*/ </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body>
