三栏布局之浮动布局

前言

在前端面试过程，HTML和CSS知识的比重已经不多的情况下，也会出一些综合性的面试题，例如：常见的页面布局类，如下：

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应，示意图如下：

在回答这个问题之前，我希望大家分析一下，分析的点分为几个方面

1. 这个问题要求真的是题目要求的这么简单吗？
2. 这个题的答案怎么去写，技巧在哪里？
3. 如果我想向面试官证明我的实力和能力，我该写几种答案？

第一个点，这个题目真的像题目这么简单好回答吗？比如这个问题可以用浮动来解决，工作一两年还可以用上绝对定位，这也是大多人给的答案，如果你想出了这两个答案，那么你还没有达到及格分。
这个题目是一个综合的题目，写下三种，才算及格。四种，才算优秀。五种以上，那是非常优秀。

第二个点，这个题的技巧在哪里？
技巧就在于平时对CSS的一个掌握，关于对布局的用法掌握多少，除了上面两种，你还能想到多少。移动端常用的flex布局听说过吗？表格布局你知道多少？grid网格布局你了解过吗？如果你能把这些写出来，demo怎么写，CSS怎么写，并且把功能实现。我已经觉得到你对这道题已经回答的非常优秀，完美了。面试官会对你有一个非常高的评价。

第三个点，这个题怎么去拔高的，你把这个答案都回答出来了，那么这些题是有延伸的，那就是各个布局的优缺点及使用场景。

那么我们开始把各个布局的实现方式用代码的方式来实现。并且阐述它的优缺点及应用场景。
先创建一个CSS reset文件

html * {
	padding: 0;
	margin: 0;
}

再写一个公共样式，给各个模块加一个颜色做好区分

.layout article div {
	min-height: 100px;
}
.layout article .left{
	width: 300px;
	background:red;
}
.layout article .center{
	background:yellow;
}
.layout article .right{
	width: 300px;
	background:blue;
}

浮动布局

代码

HTML：

<section class="layout float">
	<article class="left-right-center">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</article>
</section>

CSS:

 .left {
 	float: left;
 }
 .right {
 	float:right;
 }

这个布局的实现是通过float属性来脱离文档流。div是块元素独占一行，在不设置宽度的情况下，是等于一行。如果前面设置浮动，后面就会尾随其上。所以这就是我们要中间的放在最后一个。因为如果放在第二个的话，那么她就是独占一行的。所以下一个div的时候就会在下一行显示。

优点

浮动布局是一个在table布局之后用途最广泛的布局了。因为广泛使用，所以前人已经把坑踩平了。所以在我看来有两个优点

1. 用途广泛，几乎能在任何浏览器中完美的展现，没有兼容性要求（当然，你找最古老的浏览器版本我也没有办法）
2. 坑被踩平。你在使用的过程中遇到的任何问题，在网上都有详细完美的解决方案。用它你不用担心遇到问题
3. 方向灵活，相对于与inline-block布局，你可以向任何四个方向浮动，并且任何元素都可以添加浮动。更加灵活

缺点

由于浮动的元素是脱离了文档流，会对布局排版带来一些影响，所以有以下缺点。

1. 浮动影响。由于当初浮动是用来解决图片和文字环绕问题的，所以会带来的影响包括文字环绕、高度塌陷等等一系列浮动影响。你必须去清除浮动带来的负面影响。具体解决方案，自己搜索，网上有大把的解决方案。
2. 没有顺序无关性。我写网页一般都是按照现在中国人的习惯，把HTML元素按照从上到下、从左到右的顺序在代码中从上往下写下，这个布局就已经打破了这个规则。
3. 没有垂直居中。子元素如果想垂直居中，需要花费一些功夫。
4. 没有等高。

适用场景

对兼容性要求比较高但是你又不想用table布局，并且确定现在不需要，以后也不需要垂直居中和等高的业务场景中，