CSS3进阶：深入理解浮动

浮动的定义

这里参考：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、左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。位置越高，就会向左或向右浮动越远。