CSS布局的三种机制
网页布局的核心–就是用CSS来摆放盒子
CSS提供了三种机制来设置盒子的摆放位置,分别是**普通流(标准流)、浮动和定位,**其中:
-
普通流(标准流)
块级元素会独占一行,从上到顺序排列;
常用元素: div、hr、p、h1-h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
常用元素:span、a、i、em等 -
浮动
让盒子从普通流中浮起来,主要作用让多个盒子一行显示。 -
定位
将盒子定在浏览器的某一个位置—CSS离不开定位,特别是JS特效
CSS浮动
1、什么是浮动
概念: 元素浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定位置
作用
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段
- 可以实现盒子的左右对齐等
- 浮动最早是用来控制图片,实现文字环绕图片的效果
语法:
在CSS中,通过float属性定义浮动
选择器 {float: 属性值