CSS float浮动

float设计是为了实现文字环绕效果:

1.包裹：收缩、高度伸缩、隔绝，类似：块级格式化上下文BFC
具有包裹性的其他样式：

display：inline-block/table-cell等;
position：absolute 、fixed、stick
overflow：hidden、scroll

2.浮动带来的后果—>破坏：
.父元素的高度塌陷,从而使父级背景不能显示，
.边框不能随内容而撑开，
.margin、padding值不能正确显示；
float的破坏性只是为了实现文字环绕图片效果。
具有破坏性的其他样式：

display：none; position: absolute、fixed、sticky

3.了解Css盒模型
浏览器渲染引擎会根据CSS-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。包含content、padding、border、margin，实际宽度是四者之和。设置的Css决定盒子的大小、位置和属性；
分类：标准盒子模型、IE盒子模型
1、标准盒子模型(W3C)（内容大小：content ）

2.IE盒子（内容大小：content + padding +border 的大小）

设置两个模型：
标准：box-sizing: content-box;
IE: box-sizing: border-box;
参考：http://www.cnblogs.com/chengzp/p/cssbox.html
https://www.cnblogs.com/ztfjs/p/qdcss.html
4.清除浮动

方法一：在父级样式添加伪元素:after或者:before（推荐）

.parent:after{content:"";display:block;visibility:hidden;clear:both;height:0;}
.parent{ /* 为了照顾ie6浏览器*/zoom:1;}

方法二：clear:both清除浮动
新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“div”结束前引入“class=“clear””样式

<style>
    .parent{
    	 width:400px;border:1px solid #F00;background:#FF0} 
   .child{
  		 width:180px;height:100px;  border:1px solid #00F;background:#FFF} 
   .clearfix:before,.clearfix:after{
   		 content:"";display:table;}
   .clearfix:after{
   		 clear:both;}
   .clearfix{
   		 /*照顾ie6*/zoom:1;} 
</style>
    <div class="parent"> 
       <div class="child" style="float: left">left浮动</div> 
       <div  class="child" style="float: right">right浮动</div> 
       <div class="clearfix"></div> 
   </div> 

方法三：父级div定义 overflow:hidden;
该属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子）。