06-布局

一、盒子类型

1.块级盒子

盒子不在同一行，换行

如：

p,div,table,form,ul,ol,li

2.行级元素

盒子在同一行

a，img,span,label,button,input

二、布局

1.表格布局

• 优点：简单
• 缺点：生成很多的垃圾标签，如td，td

2.盒子模型

• 局部的微调

3.内联框架

• 有很多小页面

4.浮动布局

5.定位布局

6.弹性布局

三、常用的布局格式

1.单列布局

标准的流布局，就是一个网页内的元素按照正常从上到下，从左到右的顺序进行

2.两列布局

3.三列布局

四、浮动布局

1.float：规定元素向哪边漂浮

取值：

• left 向左浮动
• right 享有浮动
• none 不浮动（默认值）

2.浮动的元素将脱离文档流

3.超出宽度的浮动不了

4.由于浮动的元素会脱离文档流，会出现后面的元素会改变位置到浮动元素的后面，因此，需要清除浮动

方法：clear：left|right|both

清除浮动的办法：

1. 在浮动元素的父元素后面添加一个空白的div，设置clear：both

2. 在浮动元素的父元素中设置overflow:auto

3. 使用：after选择器实现

   • .clearfix:after{

     ​ content:’’;

     ​ display:block;

     ​ clear:both;

     }