浮动
一、知识要点
1、在了解浮动之前，先要了解什么是布局
布局分为3种，标准流、浮动流、定位流
标准流：一个网页的标签元素正常情况下是从上往下，从左往右排列的，块级元素会独占一行，行内元素会按照顺序依次排列。在知道浮动之前，我们使用的一切都是标准流。
浮动：元素设置了浮动属性后会脱离标准流的控制，俗称：脱标。
二、浮动详解
1、浮动在前端的最初的作用是做图片的文字环绕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> img{ /* float:right; */ float:left; } </style> </head> <body> <p> 互联网举报中心防范网络诈骗违法和不良信息举报电话信息网络传播视听节目许可证0108263号京公网安备110105000081号京网文[2011]0283-097号京ICP备13028878号12300电信用户申诉受理中心12318全国文化市场举报网站网络110报警网站 <img src="imgs/happy.gif" alt=""> 中国日报网版权说明：凡注明来源为“中国日报网：XXX（署名）”，除与中国日报网签署内容授权协议的网站外，其他任何网站或单位未经允许禁止转载、使用，违者必究。如需使用，请与010-84883777联系；凡本网注明“来源：XXX（非中国日报网）”的作品，均转载自其它媒体，目的在于传播更多信息，其他媒体如需转载，请与稿件来源方联系，如产生任何问题与本网无关。 版权保护：本网登载的内容（包括文字、图片、多媒体资讯等）版权属中国日报网（中报国际文化传媒（北京）有限公司）独家所有使用。 未经中国日报网事先协议授权，禁止转载使用。给中国日报网提意见：cdoffice@chinadaily.com.cn </p> </body> </html>
2、float的值:none(不浮动)left(向左浮动)right(向右浮动)
1》漂浮的元素浮在标准流之上，会压住标准流；子盒子不会压住父盒子的padding;
div{ width:100px; height:100px; background-color: aquamarine; } .c1{ float: left;
width:50px;
height:50px;
background-color: #777777; }
<div class="c1"></div> <div></div>
1、css部分 .fa{ width: 500px; height:500px; background-color: red; border: 10px solid skyblue; padding: 10px; } .son{ float: left; width: 100px; height: 100px; background-color:green; } 2、html部分 <div class="fa"> <div class="son"></div> </div>
3、修改css样式，看显示效果
2》浮动的元素可以解决并排问题，但是，只有第二个浮动时会在第二行显示
1、html <section> <div>熊大</div> <div>熊二</div> </section> 2、css部分 div{ float:left; }
3、浮动的特点
1》浮动元素会改变元素原来的显示模式（无论是行内元素还是块级元素设置浮动后，都具有行内块元素的特性（宽高、并排））
2》1、浮动会找最近的父亲盒子对齐2、双浮动会并排，单浮动就是标准流下的浮动3、浮动元素可以设置宽高，不设置则用内容自动撑开
3》总结：（浮）浮动的元素会浮起来，漂浮在标准流的盒子上面（漏）浮动的盒子不占据位置，他原来的位置漏给了标准流的盒子（特）浮动的盒子一般需要和标准流的父级盒子搭配使用，浮动可以改变盒子的显示模式
三、清除浮动
1、清除浮动的原因：1》浮动会对周围的元素产生影响（浮动的元素不能自动撑开父亲，而标准流的元素不存在这样的影响）2》一个盒子作为父亲，则我们一般不会设置这个盒子的高度
2、清除浮动的方式
1》给父亲设置高度（一般不采取这种方式，因为儿子的高度是不确定的，儿子的高度变化，父亲的高度也要做相应的修改，这样使得代码的维护性变差）
2》在浮动的盒子后边添加一个<div class = "clear"></div> .clear{clear:both;}
(这个也不推荐，因为增加了不必要的元素，使得页面的额结构发生了变化，影响代码的后续阅读和开发)
3》给父元素加上超出隐藏 .fa{overflow:hidden;}(这个属于偏方，是通过出发BFC机制的方式来实现清除浮动的效果)
4》伪元素清除
在父元素上加类名：clearfix
.clearfix::after{content:".",clear:both;height:0;visibility:hidden;}
ie6\ie7需要单独处理.clearfix{*zoom:1;}
5》双伪元素(推荐：代码简洁，可以出发BFC)
.clearfix:before,.clearfix:after{content:"";display:block;}
浙公网安备 33010602011771号