bfc实现两栏布局和三栏布局

最新推荐文章于 2023-08-11 23:08:26 发布
最新推荐文章于 2023-08-11 23:08:26 发布
阅读量241 收藏 1
点赞数
分类专栏： css教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41318044/article/details/118904247
版权

bfc的概念
- 块级格式化上下文 - 仅针对于块元素
- 独立的渲染区域，与外面的布局没有任何关系 ！！！
- bfc只是一个概念，不是实际的属性

两栏布局

    <style>
        *{
            margin: 0;padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        div:nth-child(1){
            width: 200px;
            height: 100%;
            background: red;
            float: left;
        }
        div:nth-child(2){
            height: 100%;
            background: green;
            overflow: hidden;
        }
    </style>
<body>
    <div></div>
    <div></div>
</body>

三栏布局

三栏布局又叫圣杯布局,双飞翼布局

    <style>
        *{
            margin: 0;padding:0
        }
        html,body{
            height: 100%;
        }
        .box1{
            width: 200px;
            height: 100%;
            background: red;
            float: left;
        }
         .box3{
            width: 200px;
            height: 100%;
            background: green;
            float: right;
        }
        .box2{
            height: 100%;
            background: pink;
            /* 触发BFC */
            overflow: hidden;
        }
       
    </style>
<body>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box2"></div>
</body>
qq_41318044
关注
专栏目录
bfc三栏布局
m0_71814235的博客
07-18 171
bfc三栏布局
BFC实现简单的2栏布局
qq_44087363的博客
11-09 162
BFC实现简单的2栏布局 <!DOCTYPE html> <html> <head> <title>BFC实现简单的2栏布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css">
自适应三栏布局BFC属性
qq_42030027的博客
03-16 448
(1)自身浮动（2）双飞翼（3）绝对定位三种都是通过设定margin值和定位属性实现自适应三栏。这样一旦左右两侧栏目宽度变化，就要更改margin的值，十分麻烦。 但是在张鑫旭老师的《CSS世界》中提到一种方法，利用BFC属性，随意改变左右两侧的宽度，不需要改变其他值也能实现自适应三栏。具体原因可以参考该书的160页。 触发BFC的情况： 根元素，float属性不为none，overflow的属性...
bfc制作两栏布局
m0_71814235的博客
07-18 184
bfc制作两栏布局
BFC实现自适应两栏布局
Joanna_7471的博客
02-23 1069
回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度的时候，浮动元素就可以参与计算了。 BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BF...
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1511
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
CSS布局——两栏布局和三栏布局
Hoshizola的博客
05-28 1475
在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。 一、两栏布局 以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。 方案一：float+margin 1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏； 2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移； 3、为防止右元素被左元素挡住，需要给右元素加外边距。 这是最简单的一种布局方案。 html结构： <div class="box"> <div c
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
weixin_42500279的博客
06-03 1949
三栏布局三列自适应布局通常指两边定宽，中间部分宽度自适应。这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。基于传统的position进行布局这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。1).绝对定位法绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用m...
HTML两栏布局和三栏布局
m0_59225791的博客
02-02 1138
HTML两栏布局和三栏布局
bfc两栏三栏布局实现思路
05-15
利用BFC可以很方便地实现两栏和三栏布局。 两栏布局实现思路： 1. 父元素设置为BFC，可以通过设置overflow: hidden或display: flow-root实现。 2. 左侧元素设置为float: left或display: inline-block，占据父元素...
利用BFC实现左右两列自适应布局
少吃点肉的博客
09-21 1623
左右两列自适应布局是前端经常会遇到的项目需求。通常的做法无外乎左列浮动定宽，然后右列或浮动，或设置外边距，或绝对定位等等。但是现在我们要用overflow来实现，想必很多人都会耳目一新。 overflow属性overflow属性最常见的一个使用场景就是规定当内容溢出元素框时发生的事情。可能的值如下:visible 默认值。元素内容不会被裁剪，元素框之外的内容仍然会呈现。 hidden 元素内容会被
BFC以及利用BFC实现自适应两栏布局和双飞翼布局
weixin_49070186的博客
07-27 567
什么是BFC？ BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 BFC的触发条件？ 根元素 html默认就是一个BFC float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC display的值为 inline-blo
BFC原理及应用（实现自适应两栏布局）
weixin_30680385的博客
07-04 393
1.自适应两栏布局(overfolw:hidden触发BFC) <style> * { margin: 0; padding: 0; } .aside { float: left; width: 100px; height: 200px; ...
两栏布局的实现
小嘟的博客
09-12 311
两栏布局 问：那么什么叫做两栏布局呢？ 答：一般将左侧一栏宽度固定，右边一栏宽度自适应称为两栏布局 课前预习：块级元素宽度自适应，高度需要手动设置（如不设置则由高度内容撑开） 本文规范：为了叙述方便，故以类名代表相应的元素 上课中： 第一种情况（浮动:float） CSS代码 /*宽度默认为铺满整个屏幕 / .outer{ height: 100px; } .left{ float: left; width: 200px;height: inherit; background: tomato; }
CSS布局学习 垂直居中 二栏布局 三栏布局 设置BFC
Dosth_Magic
12-16 1218
垂直居中 设置position：relative和margin-top为负数 设置div的transform:translateY(-50%) 设置父元素display：flex，align-items:center,justify-content:center 二栏布局 float+margin-left实现： position:absolute+margin-left实现： float+...
H5新增标签+BFC+三栏布局+移动端
qq_41340792的博客
12-25 364
H5标签在IE9（包括IE9）之前都需要转换成块级元素 display：block 在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。 1.nav 定义导航 2.header 表示网页的头部。通常是一些导航信息或者标题。 3.article 表示一块独立的部分。 4.aside 对article的内容进行信息的辅助解释。次要信息，比如博客网站中的侧边公告，或者广告，分类等信息。 5.section 文档中的一个节点或者区域。 6.footer 页面的底部。通常是链接或版权信息 7.hg
【前端】求职必备知识点3-CSS：BFC、position、两栏布局、三栏布局、水平居中（6种方法）、垂直居中（7种方法）
最新发布
karshey的博客
08-11 196
上述式子中，top和bottom为0，margin等于auto，此时浏览器为了满足这个等式会把上下的距离均匀分给margin，即达到我们想要的居中效果。横向也是一样的道理。原理：对当前元素的position设置为absolute，并且相对于父元素定位。的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。因此需要知道子元素的大小。原理：属于同一个BFC的两个相邻的Box的margin会发生重叠。原理：计算BFC的高度时，浮动子元素也参与计算。相对于该元素所在行的基线的垂直对齐。
三栏布局的几种实现方式
fredaouyang的博客
07-27 741
三栏布局的几种实现方式三栏布局顾名思义就是两边固定，中间自适应。三栏布局在开发中十分常见，比如淘宝首页。 常见的三栏布局：即左边导航和右边导航固定宽度，中间的主要内容随浏览器自适应。1.流体布局 左右模块各自向左右浮动，中间主体部分设置margin值使左右模块不遮挡住主体部分，中间宽度随浏览器自适应。缺点是主体内容无法最先加载，当页面内容较多时影响用户体验<!DOCTYPE html> <htm
CSS多栏布局-两栏布局和三栏布局
富朝阳的博客
05-14 2269
相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值