传统网页布局方式
布局的本质是用CSS摆放盒子————Div
CSS的三种传统布局方式：（实际开发中混用）
- 普通流（标准流）————标签按照规定好的默认排列方式：块级元素独占一行，行内元素从左到右自动换行
- 浮动
- 定位
引入————如何让三个div放同一排？
将div转成行内块————块之间有空隙，难控制
inline block 1
inline block 2
inline block 3
引入————如何用标准流实现以下布局
浮动可以改变元素的默认排列方式———最典型应用：让多个块级元素一行内排列显示
float Left
float Left
float Left
浮动Float布局
float属性——用于创建浮动框，将其移动到一遍，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
1、float 属性：left|right|none
2、横向排列用浮动、纵向排列用标准流（div）
float Left
float Left
float right
浮动特性—————在标准流元素看来，浮动元素相当于不存在
1、浮动元素会脱离标准流———不在保留原来的位置————可能会让下一个非浮动上移导致遮挡标准流元素
float Left（写在第1）
标准流div元素（写在第2），由于浮动元素脱标，原来的位置不保留，所以2号块跑到了左上角
float right（写在第3）
标准流div元素（写在第1）
float Left（写在第2）
float right（写在第3）
float Left（写在第1）
float right（写在第2）
标准流div元素（写在第3）
2、浮动元素会在一行内显示并且元素顶部自动对齐——且浮动元素会紧贴在一起不会有缝隙
3、浮动元素具有行内块的特性——如行内元素span加float可设置宽高———行内元素直接设float可不需设置display：inline-block
4、行内块元素、浮动元素不设置宽度———根据内容宽度决定的
5、块级元素不设宽度————默认与父元素同宽，添加浮动后，大小由内容决定
6、浮动元素经常搭配标准流的父元素
7、用标准流父元素排列上下位置，父元素中子元素浮动实现左右排列——————给父元素设宽高、居中等等大概位置
我是一个span我是一个span(width没用)
我是一个span转行内块（没设置宽度）
我是一个span转行内块（width=200px）
我是一个span转行内块（width=100%）
我是一个span float left（没设宽度）
浮动布局例1
float Left + width30% + height100%
float right + width70% + height100%
浮动布局例2
- 1：floatLeft+width180px+marginR20px
- 2:width180+marginR20
- 3:width180+marginR20
- 4width180+marginR0
浮动布局例3
浮动布局例4
1(无浮动，无w，h40px)
2无浮动，wid800，h50，marginAuto
3-2黑框大盒子非浮动
3-3黑框定宽高，居中
3-4
浮动布局例5————父元素h不写，子元素浮动，父元素的兄弟（红盒）也不浮动————使得盒子坍塌（内部缺少标准流撑开）,下面的盒子上移
需要清除浮动的条件：父元素不设高（不写死）；子元素浮动；影响了下面的标准流布局
解决：浮动布局例5————清除父元素浮动，使其自动根据浮动子盒子检测高度
方法1、找到最后一个浮动盒子，在其后面添加空标签（必须是块级）并clear:both
1
2
这里有一个加了clear：both的标签（本应是空的）
方法2、父元素添加overflow:hiden
方法3、给父元素添加.father:after{...}（伪元素写法）————相当于在后面插入一个空标签（方法1）
.father:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.father{
<--IE6/7专有-->
*zoom:1;
}
方法4、双伪元素清除浮动
.father:before .father:after{
content："";display:table;
}
.father:after{
clear:both
}
.father{
*zoom:1;
}