前端项目开发-17_CSS元素浮动.pdf

CSS元素定位

王红元coderwhy

目录

1认识浮动

content

2浮动的规则

3浮动的案例

4清除的问题

5清除浮动

6布局方案对比

coderwhy认识浮动

◼float属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

float属性最初只用于在一段文本内浮动图像,实现文字环绕的效果;

但是早期的CSS标准中并没有提供好的左右布局方案,因此在一段时间里面它成为网页多列布局的最常用工具;

◼绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

◼可以通过float属性让元素产生浮动效果，float的常用取值

none：不浮动，默认值

left：向左浮动

right：向右浮动

coderwhy浮动规则一

◼元素一旦浮动后,脱离标准流

朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

定位元素会层叠在浮动元素上面

定位元素

浮动元素

position不是static

普通元素float为left或者

非定位元素right

position是static

coderwhy浮动规则二

◼如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

带圆圈的数字，标记着浮动元素浮动之前的位置

coderwhy浮动规则三

◼规则五:浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

coderwhy浮动规则四

◼浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、inline-block元素、块级元素的文字内容

coderwhy浮动规则五

◼规则五:行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

coderwhy浮动练习一

◼浮动常用的场景

解决行内级元素、inline-block元素的水平间隙问题

coderwhy浮动练习二

◼浮动布局方案:

实现京东页面下面的布局

coderwhy浮动练习三

◼浮动布局方案:

实现京东页面下面的布局

coderwhy浮动练习四

◼浮动布局方案:

实现考拉页面下面的布局

coderwhy浮动的问题–高度塌陷

◼由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

◼解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

◼清浮动的目的是

让父元素计算总高度的时候，把浮动子元素的高度算进去

◼如何清除浮动呢?使用clear属性

coderwhyCSS属性-clear

◼clear属性是做什么的呢?

cl