float(CSS浮动)

html-css022

float(CSS浮动),第1张

1、浮动元素会完全脱离文档流,不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动,

3、浮动元素默认不会从父元素中移出

4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素

5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移

6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高

在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离, 将会无法撑起父元素的高度,导致父元素的高度丢失。

父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱,所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理!

思想:在父元素的后面加内容,内容利用clear清除浮动元素带来的影响

1、使用场景:

改变元素的排列方式的时候会用到浮动

浮动的元素会脱离文档流,正常的文档流视其而不见

浮动元素的停止:找到父元素的边框停止

浮动元素的卡顿:元素高度大于其他元素;

2、浮动引发的BUG:

1、父元素不设置高度,所有子元素都浮动

2、浮动的子元素撑不开父元素的高度

3、解决办法:

1、给父元素添加overflow: hidden

2、给父元素添加最后一个子元素 clear:both  清除浮动

3、能设置高度的元素都设置高度

4、伪类元素清除

    

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 伪元素法,只不过前后都会插入一个盒子,更符合闭合的概念。