2020-10-18 css11浮动

浮动

一.css布局的三种机制
1.普通流
块级元素会独占一行，从上向下排列
如：div,hr,p,h1~h6,ul,ol,dl,from,table
行级元素按照顺序，从左向右排列、
如：span,a,em
2.浮动
让盒子从普通流中浮起来，主要作用是让多个块级盒子一行显示
3.定位
将盒子定在浏览器的某个位置

二.浮动
1.作用：
让多个盒子排列成一行
文字环绕图片
盒子左右对齐
2.写法：

float:right/left;

3.设置了浮动属性的元素脱离了标准流，漂浮在普通元素上面，不占原来位置
4.浮动属性会改变元素display属性
盒子加了浮动后，仍是块级元素的元素，默认转换成行内块元素
5.把两个普通流元素都设置为float，原本在两行显示的盒子会在一行上显示，但如果父级装不下盒子，剩下的盒子将另起一行。