本篇博客主要介绍float布局、inline-block布局和响应式布局。
刘亦菲

float布局

特点：元素浮动脱离文档流但不脱离文本流

对自身的影响：1、形成“块”(BFC) 这个“块”负责自己的布局，比如可以设置自己的宽高。2、位置尽量靠上。 3、位置尽量靠左（右）。

对兄弟的影响：1、上面贴非float元素。 2、旁边贴float元素。3、不影响其他块级元素位置（即脱离文档流）。4、影响其他块级元素内部文本（即不脱离文本流）。

对父级元素的影响：1、从布局上”消失“ ，可能造成高度塌陷。

避免高度塌陷：1、让父元素也变成“块”

1
2
3

.father{
    overflow:auto;/*or hidden*/
}

2、设置一个元素超出浮动部分，撑起布局。常用清除浮动方式。

.clearfix::after{
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

实现两栏三栏布局

inline-block布局

1、像文本一样并列排起来。

2、没有清楚浮动等问题

3、需要处理间隙

1、父元素：font-size=0；子元素（display=inline-block）：font-size=14px（此处字体大小根据实际情况自定义）；

2、采用注释的方式，一般不采用。

对自适应大小的元素不友好，一般用来给顶宽的元素进行布局。

1、使页面在不同设备上正常使用

2、一般主要处理屏幕大小的问题

3、是否有鼠标、是否是读屏、是否支持一些样式

隐藏+折行+自适应空间

布局结构必须在开始写代码之前就确定好。

隐藏：确定那一部分在移动端是可以隐藏的

折行：类似特性列表，从横排变成一行显示一个或两个

具体方法：

rem：通过html的字体大小来确定元素字体大小的方法。通过给不同大小的屏幕不同的字号来进行布局。

viewport：媒体查询，用js或手工确定屏幕多大。