CSS two-column layout based on BFC rules (code example)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS two-column layout based on BFC rules (code example)

不言

Apr 03, 2019 am 11:35 AM

bfc

The content of this article is about the CSS two-column layout (code example) based on BFC rules. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are many ways to implement common adaptive two-column layout in css.

What we are talking about here is to achieve this by forming a new BFC when overflow is not set to visible. As for what BFC is, you can search it first, it’s basically covered. When I have more free time, I will talk about BFC and examples. That's it, enter the code:

<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
    <head>
        <title>利用BFC规则实现两栏布局</title>
        <meta charset="utf8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .contain {
                width: 100%;
                height: 100%;
                background: grey;
                color: #fff;
            }
            .contain .left {
                float: left;
                /*margin-right: 20px;*/
                width: 200px;
                height: 100%;
                word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
                background: blue
            }
            .contain .right {
                height: 100%;
                overflow: hidden;    /* 让right成为一个BFC*/
                word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
                background: darkblue;
            }
        </style>
    </head>
    <body>
        <!-- CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
            <div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
        </div>
    </body>
</html>

Pay attention to the longest line in the code (line 37). The text here is not in English, but in Latin. Of course, it is not so much typed by my hand. . Let me share with you, during testing, if you want to input something but don’t know what to input, and it looks ugly, you can be lazy. Enter lorem and press the tab key. Except for the first sentence, which is fixed, the following sentences are randomly generated. The premise is that your editor is equipped with the emmit plug-in. Hbuilder and vscode are built-in and available directly. Submit text requires the plug-in to be installed. Notepad will definitely not work. I have personally tested these. It’s a little bit of fun! The other comments are almost written. The code is originally very simple, but for these things, CSS requires more hands-on experience to try and implement it. That’s it for this time’s essay. When I’m busy, the quality may not be very good, but now I’m starting to stick to writing something.

Also, the left side is fixed and the right side is adaptive. The right side is fixed and the left side is adaptive. I believe you can handle it easily. These are all trivial matters. I’ll remind you if I think of it. This two-column adaptation does not mean that both columns are adaptive.

【Related recommendations: CSS video tutorial】

The above is the detailed content of CSS two-column layout based on BFC rules (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

See all articles