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

前言

首先声明在这篇博客里我将不会细说每一个知识点(比如什么是BFC,什么是flex等等),我主要是总结一下自己对标题中所列三个知识点的一些方法。

一、多栏自适应布局

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

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宽的子元素容器,可此时运行结果为:

5AUJTVB~)}IAM~3913()5F4_thumb[1]

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

此时我们只需要再添加如下样式:

.left,.right{
  float:left;
}

那么就能得到我们想要的结果了:

NF`QG4~)Y)[)VY%TD}(YRJ2_thumb[2]

由于这里只有两栏布局,而且都是固定布局,并且刚好占满父容器,所以第二个子元素右浮动也是一样的效果。但如果是多栏布局(比如四栏布局)并且刚好占满父容器的话,那么最后一个可以是左浮动或者右浮动。

对于两栏固定布局,其实并不一定两个子元素都需要左浮动,可以第一个子元素左浮动,第二个设置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;
}

此时运行看一下结果:

$Q3Q)~TMTM]_{%H8NL7()@T_thumb[1]

因为现在已经改成流式布局了,所以容器的宽度会随着浏览器的宽度而按比例缩放。当然,需要配合浮动或者定位。

但是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;
}

结果就是这样的:

72LU~RHH1XJ6O8FB8K$PK`L_thumb[1]

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

.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>

这时的情况是这样的:

[{6O_ZOOV4ELX(~63{C]0UE_thumb[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;
  order:1;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
   order:3;
}
.center{
    height:100%;
    background:#666;
    flex:1;
    order:2;
}

这时候出来的效果就是我们想要的:

HRKDFY]ADRI9`BUQ){KZZTL_thumb[1]

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

二、水平垂直居中

水平居中最常用的就是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;
}

现在的情况是这样的:

360截图20150907094514427

因为我们是已知宽高的,所以可以给子元素加外边距挤到中间位置,或者通过绝对定位到中间位置,当然还有一些方法,我就放在未知宽高的情况下再介绍,因为已知宽高包含于未知宽高,所以为了避免重复,我就分开了,这里就只讲仅适合已知宽高的情况。

我们给子元素加上外边距:

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

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

EXK{G1@JN8Y_7@R0M5VPCOT

现在使用绝对定位来实现:

.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,水平垂直居中就讲到这里,以上都是自己琢磨的一些方法,有什么纰漏或者不恰当的地方,欢迎留言指正。

三、清除浮动

这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。

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

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还是收到浮动的影响。

360截图20150907132503001

OK,现在给.clear加上清除浮动:

.clear{
    clear:both;
}

刷新一下效果就出来了:

360截图20150907132808775

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;
}

效果是这样的:

360截图20150907134136407

这里父容器是没有设置固定高度的,本来第一个子元素浮动之后,父元素的高度会塌陷到跟第二个子元素一样高,但由于这里分别给第二个子元素和父元素都设置了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;
}

此时子元素浮动了,脱离了文档流,所以父元素高度酒塌陷了:

360截图20150907134730403

可以看到父元素的边框挤在一起了。

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;
}

现在刷新后的效果就是:

360截图20150907135058497

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

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

 

总结

以上我总结了自己对标题中列出的三个知识点——(多栏自适应布局,水平垂直居中,清除浮动)的一些个人积累。如果有什么错误的话,欢迎留言指正。

 

若需转载,请注明出处,谢谢合作!

posted @ 2015-09-07 14:18  郭锦荣  阅读(2326)  评论(2编辑  收藏