css浮动元素脱标和浮动元素排序规则浮动元素贴靠现象

html-css070

css浮动元素脱标和浮动元素排序规则浮动元素贴靠现象,第1张

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

脱标:脱离标准流

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

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

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

3、浮动元素排序规则

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

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

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

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

4、浮动元素贴靠现象

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

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

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

1、标准流——标签按照规定好默认方式排列

2、浮动

3、定位

多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

float属性用于创建浮动框,将其移动到一边,直到左边或者右边边缘及包含块或另一个浮动框的边缘。

选择器:{ float:属性值}

1、 浮动的元素会脱离标准流(脱标),不再保留原来的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

1、为了约束浮动元素,一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动左右位置,符合网页布局第一准则。

2、一个元素浮动了,理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流,不会影响前面的标准流

父级盒子不给高度,自己盒子会撑开父级盒子高度,但是加上浮动就会无效。

额外标签法也称为隔墙法,是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如:<div style="chear:both"></div>。新的标签必须是块级元素。

选择器:{ clear :属性值}

实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动,只让浮动在父级盒子内部影响。

可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。   缺点就是无法显示溢出部分。

:after伪元素法相当于额外标签法的升级版,也是在浮动元素尾部添加空的块级元素,用法是给父元素添加属性。以下为固定格式。

类似于:after 伪元素法,只不过前后都会插入一个盒子,更符合闭合的概念。