css布局

浮动布局

• 浮动是什么？

  浮动是HTML元素存在的第二种状态
  在这种状态下：
  浮：元素会脱离文档流（浮动元素后面的流动元素会占据浮动元素的原有位置）
  动：浮动元素会向左或向右无限运动，直到它碰到另一个元素。
  块：所有的元素都是块元素
  并排：浮动元素会发生并排现象
  混排：文字围绕图片排列
  浮动不是为布局而生的。

• 浮动属性

  float:定义元素的浮动方式
  语法：

.container{
float:none | left | right;
}

属性值
none ：元素不浮动
left：让元素向左浮动
right：让元素向右浮动
如何设置元素并排
1.确定子元素
2.确定父元素
3.给子元素添加float属性
4.给子元素设置合理宽度
5.清除浮动

高度坍塌

高度坍塌是指，子元素浮动之后，父元素失去高度。造成后续元素上移，造成布局发生混乱。

• 浮动的问题

一：高度坍塌：指子元素浮动后，父元素失去高度
二：元素上移，造成布局发生混乱。（clear）

• 浮动问题的解决办法

  1.使用空元素（不推荐）
  在塌陷的父级内创建一个空标签设置clear属性。
  2.BFC | haslayout
  元素开启BFC的特点:
  1、开启BFC的元素不会被浮动元素所覆盖
  2、开启BFC的元素子元素和父元素外边距不会重叠
  3、开启BFC的元素可以包含子元素

---

开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值
（常用的方式为元素设置overflow：hidden开启BFC）
3. 使用伪元素

/*在塌陷的父级上设置一个伪元素*/
  section::after{
            content: "";
            display: block;
            clear: both;
            height: 0;
        }

clear

定义：清除元素两侧的浮动影响。

footer{
clear:left | right | both | none
}

属性值：
none ：默认不清除
both：清除元素两侧
left：清除左侧
right：清除右侧

网页布局

web 1.0 时代 ：一盘散沙，混论没有标准 IE大行其道
1989年 没有css：使用标签的属性来做页面的外观。
布局方式：表格

wed 2.0 ：HTML结构 + css样式 + js行为 互相独立 ，分离
2000年以后
布局方式：div布局

• 流动布局
• 定位布局
• 浮动布局
  1.口字形布局
  2.工字形布局
  3.两栏布局
  4.三栏布局
  5.自适应布局
  6.双飞翼布局
  7.圣杯布局

2012年，在移动互联网时代

• 弹性盒模型
• 网格布局：普适布局系统

定位布局

网格布局