通过 BFC 实现页面布局

蓓蕾心晴

发布于 2022-11-21 09:18:51

5850

实现效果如图

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

布局

登录后参与评论

0 条评论

热度

通过 BFC 实现页面布局

通过 BFC 实现页面布局

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐