标签：
<!DOCTYPE html>
CSS4-布局3-float
浮动属性最初发明的目的：用来给网页做文字环绕图片排版，写图文环绕案例
现在浮动布局的根本目的：把竖排的块级元素改为横排
网页结构层：
1：底层，普通流（文档流）
2：中层，浮动流 float
3：顶层，定位流 position
写块级元素横排案例
默认HTML元素都在底层普通流；
当给元素定义非默认值的float属性时，元素变为浮动流，漂浮到普通流元素上层,不占位；
当给元素定义非默认值的position属性时，元素变为定位流，漂浮到普通流元素和浮动流元素上层。
图文混排案例
<style>
.hunpai{width:250px;background:#ccc;}
.hunpai img{float:left; width:120px;height:120px;}
</style>
<div class="hunpai">
<img src="tu.jpg">
【身边的户外生活】磨房户外线路公开征集
分享线路领磨小驴无厘头勋章啦！ 11种线路类型，山野穿越、骑行、露营、跑步等，带你轻松玩转户外。
【骑行香港】偏爱单车径上的慢生活
【磨房户外线路】码了条线路，去戈壁！（有奖征集）
【磨房户外线路-勋章】积分规则说明
【跑遍香港】给我N个跑步的理由
【益骑中国】第二届梅州超百骑行踩线记录
</div>
<hr>
浮动：竖排块级元素转横排
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<style>
.zong{width:650px;background:#ccc;}
.zong .a1{width:200px;height:50px;background:#f00;}
.zong .a2{width:150px;height:100px;background:#0f0;}
.zong .a3{width:100px;height:150px;background:#00f;}
.zong .a4{width:50px;height:200px;background:#ff0;}
.a1{float:left;}
.a2{float:left;}
.a3{float:left;}
.a4{clear:both;}
/*浮动会导致浮动元素父级高度塌陷(高度为0)，解决方法：*/
/*1:不解决，如果父级元素没背景或者不需要看到*/
/*2:设高度，适合固定高度的父级元素*/
/*3:不固定高度，又需要，修改类名加上clearfix*/
/*此清除浮动用于浮动元素父级，解决高度塌陷问题*/
.clearfix:after{content:"\200B";display:block;height:0;clear:both;}
.clearfix{*zoom:1;}/*IE/7/6*/
</style>
<div class="zong clearfix">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
标签：
原文地址：http://www.cnblogs.com/lyp123/p/5662929.html
