HTML-CSS3-浮动

传统网页布局的三种方式

1、标准流

标准流就是标签按照规定好默认方式排列

如：块级元素会独占一行，从上向下顺序排列，可设置宽高，元素原始大小取决于元素内容

2、定位

定位的四种方式：

（1）相对定位

（2）绝对定位

（3）固定定位

（4）粘性定位

3、浮动

浮动会遮盖住下面的元素，但是不会遮盖住文字内容

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

清除浮动的三种方法：

（1）overflow：hidden

（2）额外标签法

（3）伪元素清除浮动

语法

float：属性值

属性值

left：元素向左浮动

right : 元素向右浮动

特性

（1）浮动元素会脱离标准流

脱离标准普通流的控制浮动到指定位置 浮动的盒子不再保留原先的位置

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

如果多个盒子都设置了浮动, 则它们会按照属性值一行内显示并且顶端对齐排列

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

浮动的元素是互相贴靠在一起的, 如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

浮动布局注意点

（1）浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

（2）一个元素浮动了, 理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流