美文网首页
Css - 三栏布局 - BFC

Css - 三栏布局 - BFC

作者: ElricTang | 来源:发表于2019-10-20 23:14 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-BFC规则</title>
        <style>
            *,body{
                margin: 0;
                padding: 0;
            }
            .left{
                height: 500px;
                width: 200px;
                float: left;
                background-color: red;
            }
            .right{
                height: 500px;
                width: 200px;
                float: right;
                background-color: green;
            }
            .main{
                overflow: hidden;
                height: 500px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="main"></div>
        </div>
    </body>
</html>

相关文章

  • 关于 BFC 的布局应用:清除浮动、文字环绕

    关于 BFC 的布局应用:清除浮动、文字环绕 参考文档:理解CSS中BFC BFC(Block Formattin...

  • CSS进阶(二)

    BFC 渐进增强和优雅降级 CSS验证 / 压缩 圣杯布局与双飞翼布局 BFC(块级格式化上下文) BFC(Blo...

  • BFC原理

    BFC是什么? 了解BFC之前,先了解Box,Formatting Content的概念 Box:CSS布局的基本...

  • 关于CSS的BFC

    参考:理解CSS布局和BFCCSS深入理解流体特性和BFC特性下多栏自适应布局 1、概念BFC(Block For...

  • 前端面试试题

    HTML 和 CSS 页面布局 css盒模型 BFC 页面布局 有5中可以解决: ​ 第一种:浮动 ....

  • CSS2.1

    CSS CSS2.1 固定定位的扩展理解 经典布局 BFC Box Formatting Context Bloc...

  • Day13:H5+JS+C3

    css布局中,什么是BFC BFC是Block formatting context的缩写,表示“块级格式化上下文...

  • 前端常见面试题目(四)

    一、 BFC 及其应用 1、BFC 概念 BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,...

  • bfc理解及应用

    bfc 是盒模型布局的css渲染模式。属于正常文档流。 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为...

  • 第三章 一面/二面

    3-1 页面布局 (一) 3-4 css盒模型 BFC(边距重叠)块级格式化上下文BFC的原理:1.BFC元素垂直...

网友评论

      本文标题:Css - 三栏布局 - BFC

      本文链接:https://www.haomeiwen.com/subject/dhngyctx.html