CSS核心（三十五）float浮动技巧 用浮动实现块元素的同行显示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float浮动技巧 用浮动实现块元素的同行显示</title>
</head>
<style>
.box1{
width:100px;
height:100px;
background:#f00;
/* 浮动：强制性的让元素在最左边或最右边
浮动以后，元素就不占据原来的空间，后面的元素可以顶替浮动元素原来的位置-------脱离标准流
*/
float:right;
}
/* 若要两个块元素排成一行，就给这两个元素都设置浮动 */
.box2{
width:200px;
height:200px;
background:#0f0;
float:right;
}
.box3{
width:300px;
height:300px;
background:#00f;
float:right;
}
/*
让多个元素按顺序横向排列：
1.按顺序写标签
2.让这多个元素往一个方向浮动
*/
</style>
<body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<div class="box3">
3
</div>
</body>
</html>
以上html代码中有3个div，它们都是块元素，即独占一行，当使用float浮动后，可以在同行显示。
总结：
1、浮动元素都是行内块
2、浮动元素脱离标准流
3、浮动元素不会覆盖文字
4、浮动元素不占用标准流的空间，所以浮动元素撑不开父元素的高度
若要多个块元素排成一行 就给这些块元素都加上浮动（主要意义）
浮动使用口诀：让兄弟元素一起浮动。
所有的元素添加浮动后都会自动变成行内块元素
让多个元素顺序排列的方法：
1、按照顺序写标签。
2、让多个元素向同一个方向浮动。
3、浮动的语法：(folat:left;folat:right;folat:none;)
我是文盲，所以我不懂。我是孜孜不倦的追求者，所以我成功。。。 编程员精典的心声，学习学习再学习 受益匪浅，万分感谢 作为一名程序员我真的有许许多多的话要说~!可我不知道怎么说本来我一直以为适合自写的方法才是最好的算法但我现在才明白CPU是为用户服务的,不是为程序员服务的这句话的道理~~!!!! UP 会写程序不难,但要成为大师就不仅仅是学编程就能达到的。 不错不错。说出了我在大学的困惑和努力的方向。。谢谢！！ 不错的呀学 很经典 三人行，必有我师 看了此帖，让我更加的感到我自身的不足`~~我要更加努力的学习~学习~~学海是无涯的`~~~