多栏自适应布局+水平垂直居中+清除浮动——集锦

前言

首先声明在这篇博客里我将不会细说每个知识点（好比什么是BFC，什么是flex等等），我主要是总结一下本身对标题中所列三个知识点的一些方法。

1、多栏自适应布局

首先，在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。

1.固定布局

说到固定布局想必你们已经以为无爱了，但我仍是要简单地讲一下，下面经过一个简单的实例进行讲解：

html代码：

<div class="wrap">
   <div class="left">left</div>
   <div class="right">right</div>
</div>

css代码：

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:400px;
  background:#ccc;
}
.right{
   width:300px;
   height:400px;
   background:#ddd;
}

咱们但愿的布局效果是500px宽的容器内分别有一个200px宽和300px宽的子元素容器，可此时运行结果为：

这是由于div元素是块级元素，默认是会占据整行的，因而咱们就采用浮动的方法来解决这个问题。

此时咱们只须要再添加以下样式：

.left,.right{
  float:left;
}

那么就能获得咱们想要的结果了：

因为这里只有两栏布局，并且都是固定布局，而且恰好占满父容器，因此第二个子元素右浮动也是同样的效果。但若是是多栏布局（好比四栏布局）而且恰好占满父容器的话，那么最后一个能够是左浮动或者右浮动。

对于两栏固定布局，其实并不必定两个子元素都须要左浮动，能够第一个子元素左浮动，第二个设置margin-left值撑开就好了：

.left{
  float:left;
}
.right{
  margin-left:200px;
}

这样也能实现上面的效果。但若是是多栏固定布局，我的以为仍是浮动比较方便。

在固定布局中，除了浮动以外，还有一种比较经常使用的方法就是定位。

把上面的样式代码改一改：

.wrap{
  position:relative;
}
.left{
  position:absolute;
  top:0;
  left:0;
}
.right{
   position:absolute;
   top:0;
   left:200px;
}

这样写一样能达到以前的那种效果，但定位布局比较烦的就是得精确计算每一块的位置。

因此，我的以为目前固定布局通常会结合浮动+定位+必要时的内外边距来进行布局会更加实用。固然了，浮动+定位+内外边距也一样适用于自适应布局，彼此之间都不是等号关系的。

2.两栏自适应布局

一样是上面的实例，我把它改为自适应布局：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:40%;
  height:100%;
  float:left;
  background:#ccc;
}
.right{
   width:60%;
   height:100%;
   float:left;
   background:#ddd;
}

此时运行看一下结果：

由于如今已经改为流式布局了，因此容器的宽度会随着浏览器的宽度而按比例缩放。固然，须要配合浮动或者定位。

可是CSS3提供了一种更好的弹性伸缩布局flexbox，看看怎么实现：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  flex:2;
  background:#ccc;
}
.right{
   flex:3;
   background:#ddd;
}

是否是更简单。因此说，无论多少栏布局（实际开发中也不会不少栏的），经过流式布局或者flexbox弹性伸缩布局基本能解决。但目前来讲，弹性布局兼容性还不是很好，因此用得比较多的仍是移动端布局，但整体上更多的仍是使用流式布局，必要时能够配合媒体查询。

既有固定布局也有自适应布局

仍是上面的实例，如今两栏布局第一个子元素固定宽度，而第二个子元素自适应剩余的宽度，该怎么作？

第一种方法就是给第二个子元素加左外边距，挤出来：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
}
.right{
   height:100%;
   margin-left:200px;
   background:#ddd;
}

结果就是这样的：

第二种方法就是绝对定位+外边距：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  position:relative;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
  position: absolute;
  top:0;
  left:0;
}
.right{
   height:100%;
   background:#ddd;
   margin-left:200px;
}

但其实第一种方法和第二种方法原理是同样的，换汤不换药罢了。

第三种方法，利用BFC特性：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
  float:left;
}
.right{
   height:100%;
   background:#ddd;
   overflow: hidden;
}

这里给第二个子元素设置了overflow:hidden以后呢，它就生成了一个BFC块，BFC其中的一个布局规则就是不会和float box 发生重叠，因而就和第一个浮动了的子元素隔开了，我说得比较苍白，你们能够去多了解BFC的一些布局特性，包括如何生成一个新的BFC块。那为了方便，我这里就把BFC的一些相关知识点直接放上来给你们了解一下：

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC：

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

OK，还有一种方法就是flex布局：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
}
.right{
   height:100%;
   background:#ddd;
   flex:1;
}

是否是也挺方便的？如今我提高一下难度，如今是三栏布局，左右栏固定宽度，中间自适应，该怎么作？

这时候flex布局就是最佳的选择了：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
}
.center{
    height:100%;
    background:#666;
    flex:1;
}

这种原本就很苦恼的布局，对于flex布局来讲都能轻松解决意外烦恼。

且慢，若是我想让中间的子元素优先渲染呢？

<div class="wrap">
   <div class="center">中间自适应栏</div>
   <div class="left">左边固定栏</div>
   <div class="right">右边固定栏</div>
</div>

这时的状况是这样的：

这时候吧，仍是得利用flex来解决这个问题：

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
  order:1;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
   order:3;
}
.center{
    height:100%;
    background:#666;
    flex:1;
    order:2;
}

这时候出来的效果就是咱们想要的：

好的，关于多栏自适应布局我就讲到这里，其余方面的知识扩展与应用，就留给你们去研究了。

2、水平垂直居中

水平居中最经常使用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是对内部子元素（inline/inline-block）起做用，而margin:0 auto;是对元素自身(block)起做用，具体根据本身的须要适当地运用。

垂直居中经常使用的有line-height 和 vertical-align:middle，可是它们都有使用的限制条件或者前提吧。好比line-height得和height同样高，vertical-align:middle 只对inline-block起做用，但其实还有不少坑，我的不怎么喜欢使用vertical-align。

下面咱们就直接进入水平垂直居中的讨论吧：

其实吧，水平垂直居中也是有两种状况：知道宽高 和 不知道宽高。

1.已知宽高的水平垂直居中

在这种状况下，其实就很好解决了，实例说明一下：

html代码：

<div class="wrap">
   <div class="child">水平垂直居中</div>
</div>

默认样式：

.wrap{
  width:400px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.child{
  width:200px;
  height:200px;
  background:#ccc;
}

如今的状况是这样的：

由于咱们是已知宽高的，因此能够给子元素加外边距挤到中间位置，或者经过绝对定位到中间位置，固然还有一些方法，我就放在未知宽高的状况下再介绍，由于已知宽高包含于未知宽高，因此为了不重复，我就分开了，这里就只讲仅适合已知宽高的状况。

咱们给子元素加上外边距：

.child{
  margin-top:100px;
  margin-left:100px;
}

这时内部子元素就水平垂直居中了。

如今使用绝对定位来实现：

.wrap{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px;
}

貌似绝对定位比较麻烦，但其实绝对定位对总体布局更好一些，也是比较经常使用。

2.未知宽高的水平垂直居中

1.绝对定位+css3 transform:translate(-50%，-50%)

.wrap{
  position:relative;
}
.child{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

2.css3 的flex布局

.wrap{
  display:flex;
  justify-content:center;
}
.child{
  align-self:center;
}

3.table布局

<div class="wrap">
   <div class="child">
          <div>sadgsdgasgd</div>
   </div>
</div>

.wrap{
  display:table;
  text-align:center;
}
.child{
  background:#ccc;
  display:table-cell;
  vertical-align:middle;
}
.child div{
    width:300px;
    height:150px;
    background:red;
    margin:0 auto;
}

table布局貌似得多套一层，试了好多遍，两层都出不来效果。可是这种html结构太冗余了。因此前两种比较新潮一些。

OK，水平垂直居中就讲到这里，以上都是本身琢磨的一些方法，有什么纰漏或者不恰当的地方，欢迎留言指正。

3、清除浮动

这里就不讲为何咱们要清楚浮动，反正不清除浮动事多多。

下面我就讲三种经常使用清除浮动的方法，够用了。

1.在浮动元素后面加一个空的div，并为它清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css代码：

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

如今虽然加了一个空的div，可是并无给它清除浮动，因此目前的效果就是第三个子元素.nofloat仍是收到浮动的影响。

OK，如今给.clear加上清除浮动：

.clear{
    clear:both;
}

刷新一下效果就出来了：

PS：这种状况比较适合元素之间是垂直排列布局的，为了避免受彼此浮动的影响。

2.利用BFC特性清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css代码：

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}

效果是这样的：

这里父容器是没有设置固定高度的，原本第一个子元素浮动以后，父元素的高度会塌陷到跟第二个子元素同样高，但因为这里分别给第二个子元素和父元素都设置了overflow:hidden ，因此它们都生成了一个新的BFC区域，根据上文提供的BFC布局规则能够得知：BFC区域不会与float box 重叠；计算BFC高度时浮动元素的高度也参与计算。因此就获得清除浮动的效果。说得比较绕，但其实清除浮动得根据本身开发中的实际状况合理使用。

3.使用：after伪元素，给浮动元素的父元素清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
</div>

css代码：

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}

此时子元素浮动了，脱离了文档流，因此父元素高度酒塌陷了：

能够看到父元素的边框挤在一块儿了。

OK，如今给父元素添加一个clearfix类：

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

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

如今刷新后的效果就是：

这种方法和BFC清除浮动我的用的比较多，实际开发中，其实这两种就够用了。

好的，清除浮动我也就简单地提到这里！

 

总结

以上我总结了本身对标题中列出的三个知识点——（多栏自适应布局，水平垂直居中，清除浮动）的一些我的积累。若是有什么错误的话，欢迎留言指正。

 

若需转载，请注明出处，谢谢合做！