触发BFC的条件

• body根元素
• 定位是position、fixed
• overflow不是visible
• float不是none

浮动三栏

<div class="wrap>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
</div>
.wrap{
    overflow:hidden;//触发BFC清除浮动
    height:200px
}
.left{
    float:left;
    width:200px;
    height:200px;
    background-color:red
}
.right{
    float:right;
    width:200px;
    height:200px;
    background-color:blue;
}
.content{
    height:200px;
    margin:0 200px;
    background-color:yellow
}

left right content三者的位置不能改变，导致content最后才渲染

定位三栏

<div class="wrapper">
    <div class="content">content</div>
     <div class="left">left</div>
    <div class="right">right</div>
</div>
.wrapper {
  width: 100%;
  line-height: 200px;
  color: #fffdef;
  text-align: center;
  position: relative;
}

.content {
  margin: 0 200px;
  background-color: lime;
  height: 200px;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: blue;
}

圣杯布局

    <div class="main">
        <div class="content">content</div>
        <div class="sidebar-left">left</div>
        <div class="sidebar-right">right</div>
    </div>
    <style>
        .main {
            padding: 0 200px 0 150px;
        }

        body {
            color: #fff;
            font-size: 40px;
            background-color: #666;
            font-family: Arial;
            text-align: center;
        }

        .content,
        .sidebar-left,
        .sidebar-right {
            float: left;
            position: relative;
            height: 400px;
            line-height: 400px;
        }

        .content {
            width: 100%;
            background-color: #f5c531;
        }

        .sidebar-left {
            width: 150px;
            background-color: #a0c263;
            margin-left: -100%;
            left: -150px;
        }

        .sidebar-right {
            background-color: #a0c263;
            width: 200px;
            margin-right: -200px;
        }
    </style>

双飞翼布局

<div class="main">
    <div class="content-wrapper">
        <div class="content">content</div>
    </div>
    <div class="sidebar-left">left</div>
    <div class="sidebar-right">right</div>
</div>
.sidebar-left,
.sidebar-right {
  float: left;
  height: 400px;
  line-height: 400px;
}

.content-wrapper {
  width: 100%;
  float: left;
}

.content {
  margin: 0 200px 0 150px;
  background-color: #f5c531;
  height: 400px;
  line-height: 400px;
}

.sidebar-left {
  width: 150px;
  background-color: #a0c263;
  margin-left: -100%;
}

.sidebar-right {
  background-color: #a0c263;
  width: 200px;
  margin-left: -200px;
}