CSS中的BFC详解(两栏布局和三栏布局)

css总结 专栏收录该内容
10 篇文章 0 订阅

一、BFC介绍

BFC(Block fomatting context)“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式,是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

二、形成BFC的条件

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow除了visible以外的(hidden,auto,scroll)

三、BFC布局规则:

1、内部的Box会在垂直方向,一个接一个地放置。

例:html:

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

css:

		div {
            height: 20px;
        }
        
        .container {
            position: absolute;  /* 创建一个BFC环境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

结果:*上图可见,box3浮动,box4不浮动,两种类型,会都会接着box2垂直排列,并且盒子向做对齐
上图可见,box3浮动,box4不浮动,两种类型,会都会接着box2垂直排列,并且盒子向左对齐

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

例:
html:

	<div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>

css:

		.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

结果:
在这里插入图片描述
两个盒子间的距离不是10+20=30px,而是会发生重叠,两盒子之间的距离是20px

每个元素的ma[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C9qdIltf-1570631973191)(file:///D:/css/2018.12.7/%E6%B5%AE%E5%8A%A8%E5%92%8CBFC.html)]rgin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

3、BFC的区域不会与float box重叠。

由此可引出两栏布局和三栏布局

(1)两栏布局

html:

 	<div class="box1"></div>
    <div class="box2"></div>

css:

 	.box1{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .box2{
        height: 300px;
        background-color: blue;
        overflow: hidden;
    }

在这里插入图片描述左方的方块不会变,右边蓝色的方块会根据浏览器窗口大小自适应页面

(2)三栏布局

左右两边固定宽度,中间不设宽,因此中间的宽度自适应,随浏览器的大小变化而变化。
html:
注意:center盒子的div一定要在写在最下面,这样左右两边设置左右浮动,不占位,center盒子自动顶上去

	 <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>//这里,最下面!
    </div>

css:

  .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: green;
    }
    .right{
        float: right;
        width: 200px;
        height: 300px;
        background-color: green;
    }
    .center{
        overflow: hidden;
        height: 300px;
        background-color: yellow;
    }

注:设置overflow:hidden;的目的是让center盒子溢出隐藏,如果不设置,它多余的部分就在left和right的下面。
在这里插入图片描述
补充:

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算

  • 1
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值