一 浮动(float)
网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置.
传统网页布局的三种方式
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):
普通流(标准流)
浮动
定位
1.
标准流(普通流/文档流)
所谓的标准流: 就是标签按照规定好默认方式排列.
1. 块级元素会独占一行,从上向下顺序排列。
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
常用元素:span、a、i、em 等
1.2 标准流(普通流/文档流)
以上都是标准流布局,我们前面学习的就是标准流,
标准流是最基本的布局方式
。
注意:
实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)
为什么需要浮动?
总结:
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标
签默认的排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
float
属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
浮动的特点: (重难点)
加了浮动之后的元素,会具有很多特性,需要我们掌握的.
1. 浮动元素会脱离标准流(脱标) 相当于从地面飘到了空中
1.
浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
• 相当于从地面飘到了空中
2.
浮动元素比标准流高半个级别,可以覆盖标准流中的元素