浮动的定义
这里参考:http://www.w3school.com.cn/cssref/pr_class_float.asp
浮动元素
首先,会以某种方式将浮动元素从文档流中删除,不过它对布局依旧有影响。比如,一个元素浮动时,其他元素会围绕该元素。如图1。
CSS代码:
p.aside{
float: right;
margin: 10px;
width: 400px;
border: 1px solid;
}
图1
其次,浮动元素周围的外边距不会合并。如果有一个浮动元素的外边距为10px,它右边的元素也有外边距,两元素的外边距不会合并。
再者,如果要浮动一个替换元素,如果不设置该元素的width,那么该元素的宽度将尽可能大。
图2
浮动规则
1、浮动元素的左(右)边界不会超过它的父元素的左右边界。
2、浮动元素的左(右)边界必须是它前面一个浮动元素的右(左)边界,除非前者在后者的底端下面。这一规则避免了浮动产生重叠。如下图3:
图3
3、左边元素的右外边界不会在其右边浮动元素的左外边界的右边,右边元素的左外边界不会在其左边浮动元素的外右边界的左边。这个规则防止浮动元素相互重叠。如图4。
图4
4、一个浮动元素的顶端不能比其父元素的内顶端高。该规则防止浮动元素一直浮动到文档流的顶端。
5、浮动元素的顶端不能比之前所有的浮动元素的顶端高。如下图5,红黄盒子向左浮动,蓝色盒子向右浮动。黄色盒子因宽度较大,所以在红色盒子的底端,而蓝色盒子没有高于它前面的黄色盒子的顶端。
CSS代码:
.red{
float: left;
margin: 10px;
width: 200px;
height: 100px;
background: red;
}
.yellow{
float: left;
width: 200px;
height: 100px;
background: yellow;
}
.blue{
float: right;
margin: 10px;
width: 110px;
height: 100px;
background: blue;
}
图5
6、浮动元素必须尽可能高地放置。
7、左浮动元素必须向左尽可能远,右浮动元素必须向右尽可能远。位置越高,就会向左或向右浮动越远。