随笔- 530 文章- 2 评论- 82 阅读- 146万

通过 BFC 实现页面布局

实现效果如图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
            .contain0 {
                overflow: hidden;
                width: 100px;
                height: 100px;
                background-color: pink;
            }

            .wrapper {
                overflow: hidden;
            }

            .box1 {
                height: 20px;
                margin: 10px 0;
                background-color: blue;
            }

            .box2 {
                height: 20px;
                margin: 20px 0;
                background-color: blue;
            }
            .contain1 > .column:nth-of-type(1) {
                float: left;
                width: 200px;
                height: 300px;
                margin-right: 10px;
                background-color: pink;
            }

            .contain1 > .column:nth-of-type(2) {
                /* 创建bfc */
                /* 不设宽度，实现宽度自适应 */
                overflow: hidden;
                height: 300px;
                background-color: purple;
            }

            .contain2 > .column:nth-of-type(1),
            .contain2 > .column:nth-of-type(2) {
                width: 100px;
                height: 300px;
                background-color: blue;
            }
            .contain2 > .column:nth-of-type(1) {
                float: left;
            }

            .contain2 > .column:nth-of-type(2) {
                float: right;
            }

            .contain2 > .column:nth-of-type(3) {
                /* 创建bfc */
                /* 不设宽度，实现宽度自适应 */
                overflow: hidden;
                height: 300px;
                background-color: pink;
            }
            .contain3 > .left {
                float: left;
                width: 100px;
                height: 100px;
                background-color: yellow;
            }

            .contain3 > p {
                background-color: blue;
                /* 创建bfc */
                /* 不设宽度，实现宽度自适应 */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>全部通过overflow:hidden，来变成BFC容器</h2>
        <div class="contain0">
            <div class="wrapper">
                <div class="box1"></div>
            </div>
            <div class="box2"></div>
        </div>
        <div>============================================</div>
        <h3>左侧宽度固定，右边自适应</h3>
        <div class="contain1">
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div>============================================</div>
        <h3>两侧宽度固定，中间自适应</h3>
        <h4>
            子元素浮动，子元素不浮动元素设置高度或者父元素overflow:hidden清除浮动，从而撑起父元素高度
        </h4>
        <div class="contain2">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div>============================================</div>
        <h3>避免文字环绕</h3>
        <div class="contain3">
            <div class="left"></div>
            <p>
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
            </p>
        </div>
    </body>
</html>