浮动布局

概念：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另一个浮动元素为止

　　元素浮动以后就会脱离正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样

 

浮动布局的优点：

　　在图片混排的时候可以很好的使文字环绕在图片周围

　　当元素浮动起来后，它可以同块级元素一样设置 宽高

浮动布局的缺点：

　　元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷

 

清楚浮动的方法：

　　1.添加额外的标签，并添加clear属性  或  也可以添加一个<br>标签

　　<div class="parent"><div style="clear: both"></div>

　　2.父级添加overflow属性，或者设置高度

　　<div class="parent" style="overflow:hidden"><div class="f"></div></div>

　　3.建立伪类选择器清楚浮动

　　.parent: after {

　　　　content: ' ';

　　　　display: block;

　　　　height: 0;

　　　　visibility: hidden;

　　　　clear: both;

　　}

　　<div class="parent"> <div class="f"></div> </div>