浮动
浮动的概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
使用的场景：用于设置对象靠左与靠右浮动样式，用来做页面布局，主要是用在块元素的横向布局场景下。
float语法：
float常跟属性值left、right、none
float:none; 不使用浮动
float:left; 靠左浮动
float:right; 靠右浮动div{float:left} /* 设置div对象浮动靠左（left） */ div{float:right} /* 设置div对象浮动靠右(right) */文档流：文档中所有元素所处的位置，系统在解析我们的代码时时按照从上到下从左到右的顺序依次解析的。
浮动的特点：
1.设置了浮动的元素，该元素的大小默认由内容撑出。
2.设置了浮动的元素会变成一个块级元素，不管它本身是什么，所以可以设置宽高。
3.设置了浮动的元素，水平浮动直到遇到父级的边框或者另一个浮动元素。
4.浮动的元素，脱离文档流，会影响后面的元素。当后面的元素上面有文字或者图片时，文字或者图片内容不会受影响，不过还是会影响文档的布局。我们可以用这种特性做文字环绕效果。
5.浮动的元素，自动margin失效。浮动造成的影响：
1.一个元素浮动后会影响到它后面的元素。
2.当父级没有设置高度时，其高度默认由内容撑出，此时如果父级里的元素发生浮动，父级会发生“内容塌陷”
清除浮动：
上面两种情况影响到了页面的结构布局，所以大多数时候我们设置完浮动后要进行相应的清浮动操作，方法如下。
方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清 浮动，或直接添加行内元素<div style="clear:both"></div>。其他标签br等亦可。
.box{ padding:5px; border: 1px solid #000; } .box p { float: right; } .box img { float: left; } .clear { clear: both; } <div class="box"> <p>自定义文字</p> <img src="img.png" /> <div class="clear"></div> <!-- <div style="clear:both"></div> --> </div>优点：简单，代码少，通俗易懂，容易掌握，浏览器兼容性好。
缺点：会添加大量无意义的空标签，代码不够优雅，有违结构与表现的分离，后期不容易维护。（不推荐使用）方法二：父级div定义 height
元素浮动后会造成父级内容塌陷，即父级会当没有那个浮动元素，高度若没有其他元素撑起会自动拾取浮动元素的高度
<style> .div1{ background:#000080; /*解决代码*/ height:200px; } .div2{ background:#800080; height:100px; margin-top:10px; } .left{ float:left; width:20%; height:200px; background:#DDD } .right{ float:right; width:30%; height:80px; background:#DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。（视情况可用,尽量不用或者少用）方法三：父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，会产生新的浮动问题，不可能一直浮动到body。（不推荐使用）方法四：父元素设置 overflow：hidden
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
<style> .div1{ background:#000080; /*解决代码*/ overflow:hidden; } .div2{ background:#800080; height:100px; margin-top:10px; } .left{ float:left; width:20%; height:200px; background:#DDD } .right{ float:right; width:30%; height:80px; background:#DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>优点：不存在结构和语义化问题，代码量极少，浏览器支持好。
缺点：不能和position配合使用，无法显示需要溢出的元素，因为超出的尺寸的会被隐藏。（视情况可用，尽量少用）方法五：after伪元素清浮动
after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout，例如使用 zoom:1。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
<style type="text/css"> .div1{ background:#000080; } .div2{ background:#800080; height:100px; margin-top:10px } .left{ float:left; width:20%; height:200px; background:#DDD } .right{ float:right; width:30%; height:80px; background:#DDD } /*清除浮动代码*/ .clearfix:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } .clearfloat{ zoom:1 } </style> <div class="div1 clearfix"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。（推荐使用，建议定义公共类，以减少CSS代码）
display:inline-block;也可以把块元素横向布局，但有弊端：
1.改变了元素的特性.
2.低版本的ie浏览器不支持display:inline-block;
文字环绕效果：
<style type="text/css"> p{ width: 500px; font-size:25px; background-color:cyan; } img{ float:left; } </style> <body> <img src="dog.jpg" alt=""> <p>这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈这是一个二哈</p> </body>