盒模型之浮动和定位

浮动元素高度塌陷产生的原因

• 元素浮动之后从文档流中脱离出来，它原来在文档流中占据的空间就会被释放出来，它后面的元素会自动填充它出让出来的空间大小

浮动元素高度塌陷解决方案

• html代码

<div class="box">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>

• css代码

     .box{
        border: 2px solid #000;
      }
      .box1,.box2,.box3 {
        width: 200px;
        height: 200px;
        float: left;
      }
      .box1 {
        background-color: lightblue;
      }
      .box2 {
        background-color: lightcoral;
      }
      .box3 {
        background-color: lightgreen;
      }

• 解决方案 （前三个方案基本不用，主要用到的是方案4和放啊安5）

  1、 给父元素也添加一个高度
  .box { height: 200px; }

  2、把父元素也浮动起来
  .box{float: left;}

  3、添加一个元素专用于清除浮动(置于父级元素的最后一个子元素位置)
  .clear {clear: both;}

  4、通过添加一个伪元素来解决
  .box:after { content: ""; display: block; clear: both; }

  5、使用overflow
  .box { overflow:hidden; }

• 效果图
  

使用定位与浮动完成一个三列经典布局

• html

  <div class="header">
    header
  </div>
  <div class="container">
    <div class="left">左侧</div>
    <div class="main">内容区</div>
    <div class="right">右侧</div>
  </div>
  <div class="footer">
     footer
  </div>

• css 定位实现

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header,
.footer {
    width: 960px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    background-color: lightblue;
}
.container {
    width: 960px;
    margin: 10px auto;
    min-height: 100px;
    position: relative;
}
.container > .left {
    width: 200px;
    background-color: wheat;
    min-height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
.container > .right {
    width: 200px;
    background-color: wheat;
    min-height: 100px;
    position: absolute;
    top: 0;
    right: 0;
}
.container > .main {
    background-color: lightgreen;
    min-height: 100px;
    width: 540px;
    position: absolute;
    top: 0;
    left: 210px;
}

• css 浮动实现

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header,
.footer {
    width: 960px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    background-color: lightblue;
}
.container {
    width: 960px;
    margin: 10px auto;
    /* 清浮动 */
    overflow: hidden;
}
.container > .left {
    width: 200px;
    background-color: wheat;
    min-height: 100px;
    float: left;
}
.container > .right {
    width: 200px;
    background-color: wheat;
    min-height: 100px;
    float: left;
}
.container > .main {
    background-color: lightgreen;
    min-height: 100px;
    width: 540px;
    float: left;
    margin: 0 10px;
}

• 效果图