一个代码萌新对网页三栏布局的整理分享

一个代码萌新对网页三栏布局的整理分享

前言

作为代码界的萌新，也是博客园的萌新，第一次在自己的博客园里上传人生中第一篇随笔，可想而知还是挺激动的！【#正经脸】

（内心表示：哦，真的么？难道不是被老师骗进来写一些学习总结么？【#dog邪魅一笑】）

言归正传

网页三栏布局是什么？

浅意是利用css将三个块合理份配在一个网页中。先拿PC端的横向网页来做例子：

以下是定义的三个普通的div块：

 

并给三个块赋予属性：

 

 

 

在浏览器如下：

 

 

 

 

此时我们需要将a跟c进行浮动处理：

 

 

 然后让我们看下效果：

 

这时我们发现页面有点奇怪，并没有我们想象的三栏布局，原因是什么？

<敲黑板！~>

老师强调，这是由于块的顺序有问题，我们需要将c放在b的前面，才能保证a跟c在同一水平线上（顶端在浏览器顶端对齐），让我们看下更改结果：

 

 

 

 好的，成功解决了三栏布局的一半了！接下来我们要调整下b盒子。

我们可以看出，虽然a跟c盒子已经在页面的两端，但是b盒子却占满了整个网页的宽度，这是因为a跟c做了浮动，导致本身浮出了文本（不占位子）。

所以针对这个问题，我们需要借助BFC来清除浮动效果：

 

 

 

 好的，完美解决！