最近开始学习 CSS，了解了一些基础和常规写法。CSS 的知识十分复杂，是值得不断发掘和完善的一个前端模块。对于新人来说，最好的方法就是尝试，去模仿，遇到问题再去深入，一点一点得增加对 CSS 的基础的理解。

CSS 布局对于新人来说，是一个比较基础的难点，首先我们应该理解一些常用的布局属性

学习 CSS 布局通过这以网站，学习‘display’，‘position’ 以及 *‘float’ *等属性，加深对其认识。

下面介绍几种常用的布局方法

1.左右布局

1.1.用 *‘float’ *实现左右布局

只要设定两个布局块的宽度总和为 ‘*container’(容器) *的宽，那么俩个 class 的 float 属性可均为 *‘float:left;’ *

也可以用以下方法让右边块级元素自适应左边达到左右布局

即给 ‘right’ 的宽度加上 ‘margin-left’

1.2.用** ‘position’ **实现左右布局

父元素设置为position:relative;

left 设置固定宽度，设定为绝对定位’position:absolute’。

right 设置为相对定位’position:relative’。

right 设置左边距，*‘margin-left’ *为左侧栏的宽度。

2.左中右布局

2.1.用 *‘float’ *实现左右布局

其原理与 *‘float’ *左右布局一样，且也可以用自适应。

值得注意的是 *‘middle’ *所在块与 *‘left’ *所在块一样，要用 *‘float:left;’ *

而 ‘right’ 所在块可以用 ‘float:left’ 或 ‘float:right;’ 以及自适应。

2.2.用** ‘position’ **实现左中右布局

原理与前面类似，值得注意的是，我们要调整一下 html 的布局，保证 ‘right’ *列 div 在 *‘middle’ **列 div 前，不然会出现第三块换行显示的情况，此问题涉及文档流**

文档流：文档内元素的流动方向：内联元素从左往右，宽度不够另起一行继续；块级元素，每一块占一行，从上到下依次往下

所以同理，2.1.中*‘middle’ *若用自适应，也要调整 html 与上面一样

3.水平居中

其实前面已经用到了水平居中的方法

margin: 0 auto; 常用于块级元素

当然还有其他水平居中及垂直居中的方法，网上有很多相关博客。如16 种方法实现水平居中垂直居中

另外，如何实现将垂直元素变成水平，也可以用‘float:left;’

方法如下：

1.给所有的子元素加 float:left

2.给父元素加 clearfix 类 **（其目的是去掉float:left **产生的 bug，一定会有 bug，因此一定要加上）

clearfix 类写法如下

通过上述知识，相信你对‘display’，‘position’ 以及 ‘float’ 等属性已经有所认识。后续学习过程中了解了 ‘flex’属性（其实学习 CSS 布局里提到了，有兴趣可以看 MDN 文档，但是看文档很多时候不能快速理解）推荐看看大佬们的博客，这里推荐阮一峰老师关于‘flex’布局的博客，上述 1，2 种布局方式现已经不提倡，‘flex’是个强大的属性，‘flex’布局应作为布局的首选。

本文主要用于个人学习使用，如有侵权请联系我删除

主要参考：