css布局篇——两栏布局（无废话版）

用户77230783637
0 阅读2分钟

核心思路

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应

第一种方法

  • 浮动 + margin-left(将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px)
<body>
  <div class = "box">
    <div class = "left"></div>
    <div class = "right"></div>
  </div>
  我是文字
</body>

<style>
    .left{
        width: 200px;
        height: 400px;
        background-color: orange;
        float :left;
  }
    .right{
        height: 300px;
        margin-left: 200px;
        background-color: yellowgreen;
    }
</style>

image.png

oh my god 下面的其他内容怎么跑上去了？ 是因为我们使用了浮动。

啥是浮动？

浮动会导致元素脱离原来普通的文档流。元素可以向左或者向右浮动，直到碰到父容器或其他浮动元素才停下。在原来的文档流里，它就像被 “删掉” 了一样，不占位置。这样一来，父元素就会因为没东西撑着，高度变成 0，出现高度塌陷，后面的内容也会自动往上跑，跟浮动元素叠在一起。

解决办法：

  • BFC，块级格式化上下文，BFC 规定了内部的块级元素的布局方式。常见的做法是为父元素添加：
overflow:hidden;

啥是BFC

块格式化上下文（Block Formatting Context，BFC），是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC的特点

  • 垂直方向上，自上而下排列，和文档流的排列方式一致。
  • 在BFC中上下相邻的两个容器的margin会重叠
  • 计算BFC的高度时，需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器，容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border相接触
人话

BFC就是一个独立的布局容器，内部元素自己玩自己的，不跟外面互相干扰，还能把浮动元素 “包住”，解决高度塌陷。

创建BFC的条件

  • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；
  • 元素设置绝对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；
  • overflow 值为：hidden、auto、scroll；

创建BFC后的效果

回归正题，我们实现两栏布局只需要为.box 元素添加样式：

overflow:hidden;

image.png

第二种方法

  • 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        height: 400px;
        background-color: orange;    
  }
    .right{
        flex: 1;
        height: 300px;
        background-color: yellowgreen;
    }
</style>
avatar
文章
阅读
粉丝