1. CSS 浮动
1.1 传统网页布局的三种方式
网页布局的本质——用 CSS 来拜访盒子。把盒子摆放到相应位置
CSS 提供了三种传统布局方式
- 普通流(标准流)
- 浮动
- 定位
**标准流:**标签按照规定好的默认方式排列
- 块级元素会独占一行,从上到下顺序排列
- 常用元素:
div,hr,p,h1~h6,ul,ol,dl,form,table
- 常用元素:
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
- 常用元素:
span,a,i,em
- 常用元素:
标准流是最基本的布局方式
1.2 为什么要使用浮动(float)
-
有很多布局效果标准流无法完成,此时就可以利用副都懂完成布局。因为浮动可以改变元素标签默认的排列方式
-
浮动最典型的应用:可以让多个块级元素一行内排列显示
-
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
1.3 什么是浮动
flot
属性用于创建浮动框,将其移动到以彼岸,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 {
float: 属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动 |
left | 元素向左浮动 |
right | 元素向右浮动 |