css浮动与清除浮动

html-css010

css浮动与清除浮动,第1张

css浮动(float:none | left | right)在网页布局中我们经常使用的属性,也是经常会出现Bug的地方。

首先我们要搞清楚为什么要用到float呢?

网页布局中块级元素,在页面中独占一行,自上而下排列,也就是传说中的文档流。

可是我们要实现左右模块该怎么实现,这就需要用到float了,当我把第三个设置左浮动

然后我们在测试第四个也设置左浮动

下面我将第二个和第四个右浮动

我们在测试将第三个浮动取消

可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决?

这个时候就需要我们清除浮动(clear:both | left | right)

上面的例子 希望第三个左浮动,第二个和第四个右浮动,第五个不受影响在最下面。

1、什么是浮动元素脱标?

脱标:脱离标准流

当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标

2、浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了,而后面一个元素没有浮动,那么这个时候前面一个元素就会盖住后面一个元素

3、浮动元素排序规则

3.1相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面

3.2不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动.

3.3浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定

3.4如果第一个元素是左浮动第二个元素是不浮动第三个元素是右浮动,那么第三个元素的右浮动会另起一行浮动,会在第二行的右边右浮动以此类推(个人实验出来的结果)

4、浮动元素贴靠现象

4.1如果父元素的宽度能够显示所有浮动元素那么浮动的元素会并排显示

4.2如果父元素的宽度不能够显示所有浮动元素,那么会从最后一个元素开始往前贴靠

4.3如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边