首页 > 代码库 > float详解、圣杯布局

float详解、圣杯布局

一、开始

虽然现在有了flex弹性盒子模型,很多布局效果都可以通过flex盒子来实现,但由于flex盒子模型的兼容性不容乐观

技术分享

ie至少要10才能支持flex,所以还是很有必要学习float流式布局的

 

二、实例

正常的块级元素的布局是这样的:(文字代表元素的float属性)

技术分享

对于float布局要记住:

  1.如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行

  2.如果浮动元素的上一个元素不是浮动,那么该元素仍然处于上一个元素的下方,根据浮动设定在左或者在右,而其本身也脱离普通流,后边的元素会自动往上移动到上一个普通流元素下方为止

 

技术分享

对第二个元素设置float:left,因为红色块不是浮动,所以橙色块仍在红色块下方,紫色块会向上移动到红色块(普通流)下方为止

 

技术分享

如果对紫色块设置float:right,则紫色块橙色块都会位于红色块(普通流)下方,而紫色块相邻的下一个绿色块也会向上移动到红色块(普通流)下方。

 

如果我们想让绿色块留在原本属于他的一行而不向上移动,可以给他加上clear:both,这样他就不会移动了

技术分享

关于清除浮动:

  1.清除浮动并不是说让浮动元素回到文档流
  2.清除浮动只会改变改元素自身的位置,并且只针对排在该元素前面的元素。目的是让自己的左边或者右边没有浮动元素

 

当然用clear做更多的事,比如我们不想让紫色块橙色块在同一行,可以在紫色块上加clear:left

技术分享

如果我们给绿色块加的属性不是clear:both,而是clear:left的话,紫色块绿色块就在同一行了

技术分享

关键是记住一项元素布局的是他的上一个元素:

比如我们给橙色块clear:right紫色块不加clear,则橙色块紫色块在同一行,橙色块的clear属性不会影响到紫色块

技术分享

 

 

三、圣杯布局

所谓圣杯布局,即是两边定宽,而中间自适应的一种布局: 用到浮动、负边距、相对定位,不添加额外标签


html结构为:

<div class = "header">header</div>
    <div class = "container">
        <div class = "left">left</div>
        <div class = "center">center</div>
        <div class = "right">right</div>
    </div>
<div class = "footer">footer</div>

填好一些公用的样式:

.header,
    .footer{
        background: grey;
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .left,
    .center,
    .right{
        height:50px;
        text-align: center;
        line-height: 50px;
    }
    .left{
        background: red;
    }
    .center{
        background: black;
    }
    .right{
        background: purple;
    }

这时候页面的结构为:

技术分享

接下来我们想让left和right各占50px宽度,中间自适应:

.header,
    .footer{
        background: grey;
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .container{
        padding: 0 50px;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
    }
    .left{
        float: left;
        width: 50px;
        margin-left: -50px;
        background: red;
    }
    .center{
        float: left;
        width:100%;
        background: black;
    }
    .right{
        float: left;
        margin-left: -50px;
        right: -50px;
        width:50px;
        background: purple;
    }
    .footer{
        clear:both;
    }

即修改了container左右padding:50px,center宽度100%,全部向左浮动,再加上left和margin等属性使之排列在一行

技术分享

我们希望中间部分的高度被内容撑开,但此时如果任意一个的高度改变,其余两个的高度是不会变的:

技术分享

这个问题我们可以通过padding补偿发来解决:

.container{
        padding: 0 50px;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    }

主要是修改外层container的overflow:hidden,给子元素一个足够大的padding并margin负值回来,就能够同时改变高度了:
技术分享

 最终代码:

<style>
    #wrapper{
        width: 300px;
        height: 1000px;
        margin: 50px auto;
        line-height: 200px;
        font-size: 20px;
        color: white;
        text-align: center;
        overflow: hidden
    }
    .header,
    .footer{
        background: grey;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .container{
        padding: 0 50px;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    }
    .left{
        float: left;
        width: 50px;
        margin-left: -50px;
        background: red;
    }
    .center{
        float: left;
        width:100%;
        height: 100px;
        background: black;
    }
    .right{
        float: left;
        margin-left: -100%;
        right: -100%;
        width:50px;
        background: purple;
    }
    .footer{
        clear:both;
    }
</style>
<body>
    <div id = ‘wrapper‘>
        <div class = "header">header</div>
        <div class = "container">
            <div class = "left">left</div>
            <div class = "center">center</div>
            <div class = "right">right</div>
        </div>
        <div class = "footer">footer</div>
    </div>
</body>

 

至此,就简略的复习完了float和圣杯布局的基本知识点

 

float详解、圣杯布局