css常用布局

一、常见布局方法

• 浮动（float）：兼容性好，但会脱离标准文档流
• 绝对定位（position）：子元素也脱离标准文档流
• flex布局：解决上述两个不足，移动端基本用flex布局
• 栅格（grid）系统布局：适用于多端设备

---

二、两栏布局

左边宽度固定，右边宽度自适应。

1、浮动

• 左边固定宽度并加浮动
• 右边添加margin-left，宽度为auto

    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <style>
        .box {
            height: 400px;
        }

        .left {
            background-color: antiquewhite;
            width: 200px;
            float: left;
        }

        .right {
            background-color: aqua;
            width: auto; //撑满整个父元素
            margin-left: 200px;
        }
    </style>

2、flex布局

• 父元素添加display:flex
• 左边固定宽度，右边flex:1

        .box {
            height: 400px;
            display: flex;
        }

        .left {
            background-color: antiquewhite;
            width: 200px;
        }

        .right {
            background-color: aqua;
            flex: 1;
        }

---

三、三栏布局

左右两栏固定，中间栏自适应

1、绝对定位

• 左右两栏绝对定位
• 中间栏添加左右方向的margin值
• 绝对定位会脱离文档流，所以需给三个子元素添加高度，否则它们的高度为0

    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

        .box {
            position: relative;
            height: 400px;
        }

        .left {
            position: absolute;
            background-color: antiquewhite;
            width: 100px;
            height: 400px;
        }

        .center {
            background-color: pink;
            width: auto;
            /* height: 400px; */
            margin-left: 100px;
            margin-right: 100px;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            background-color: paleturquoise;
            width: 100px;
            height: 400px;
        }

2、flex布局

• 父元素display:flex
• 左右两栏固定大小
• 中间栏flex:1

        .box {
            display: flex;
            height: 400px;
        }

        .left {
            background-color: antiquewhite;
            width: 100px;
        }

        .center {
            background-color: pink;
            flex: 1;
        }

        .right {
            background-color: paleturquoise;
            width: 100px;
        }

---

四、盒子水平居中

1、flex布局+主侧轴

2、flex+margin

3、绝对定位+margin

---

五、文字水平居中

1、text-align + line-height

---

六、BFC

1、概念

BFC（Block Formatting Context）块级格式化上下文，相当于一块独立的渲染区域，有自己的渲染规则。

2、触发BFC的条件

(以下任意单独条件都可触发BFC)

1、根元素Html就是一个BFC

2、设置float属性

3、overflow属性值不为visible

4、行内块元素inline-block

5、position属性值为absolute或fixed

3、BFC解决的问题

问题一：父子关系时，子元素发生margin塌陷（即父元素和其子元素margin合并）

解决：父元素开启BFC

    给父元素添加BFC后，三个子元素与父元素边界margin合并问题解决了。但子元素之间仍有margin合并问题，因为同一BFC的相邻元素会margin合并。因此，另一种解决方法是给子元素添加BFC，这样，父元素处于html根标签这个BFC中，三个子元素分别是三个BFC。它们处于不同的BFC中，不会margin合并。

问题二：父子关系时，子元素浮动，父元素高度坍塌（即父元素高度为0）

父元素未设置高度，其高度本应该由子元素撑开，但子元素设置了浮动，脱离了文档流，所以父元素高度变为0

解决：父元素开启BFC

问题三：同级关系时，与浮动元素发生重叠

解决：将被覆盖元素设置为BFC