CSS提供了三种传统布局方式(简单说就是舒如何进行排列顺序:
1、普通流(标准流)
2、浮动
3、定位
注意:实际开发中, 一个页面基本都包含了这三种布局方式。
标准流
标准流:就是标签按照规定好默认方式排列。
1.块级元素会独占一行,从上向下顺序排列。
常用元素:div、 hr、p、h1~h6、ul、 ol、 dl、 form、table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
常用元素: span、 a、i、em等
标准流是最基本的布局方式。
为什么需要浮动
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
浮动(float)
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边