前言

• 1 table 布局

• 2 flex 布局

• 2.1 盒模型

• 2.2 display / poistion

• 2.3 flexbox 布局

• 3 float 布局

• 3.1 高度塌陷

• 3.2 两栏布局

• 3.3 三栏布局

• 4 响应式布局

• 4.1 meta 标签

• 4.2 使用 rem

• 4.3 media query

• 5 总结

前言

CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。

我们在实际项目，编写HTML页面中，经常遇到两个 float 元素虽然包含在第一个外层 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。这就是高度塌陷，今天学2种解决方案，大学一起学习，

第一：

父元素设置 overflow: auto 或者 overflow: hidden

第二：

给父元素加一个 after 伪类

.container::after{

        content:'';

        clear:both;

        display:block;

        visibility:hidden;

        height:0; 

    }