CSS创建BFC—学习笔记

最新推荐文章于 2023-02-12 12:04:07 发布

weixin_46245232

最新推荐文章于 2023-02-12 12:04:07 发布

阅读量414

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_46245232/article/details/108437489

版权

BFC

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
触发条件：渲染区域由某个html元素创建。

根元素；
浮动和绝对定位；
overflow属性值不等于visible的块盒；
display的值是inline-block、table-cell、flex、table-caption或者inline-flex。

独立：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
具体规则：

创建BFC的元素，它的自动高度需要计算浮动元素（清除浮动）：
①、overflow：超出部分显示方式。（创建BFC）
       overflow：hidden；超出部分隐藏；
       overflow：auto；超出部分以滚动条方式展示；
       overflow：scroll；显示滚动条；

&::-webkit-scrollbar{dsiplay：隐藏滚动条；
overflow：visible；显示超出部分；（默认值）
overflow-x、overflow-y x轴、y轴方向超出部分显示方式。
header{
    overflow: hidden;
    border-bottom: 1px dashed #4d4a40;
}
.title{
    height: 145px;
    margin: 30px 0px;
    /* 创建BFC（创建格式化上下文）
    Block Format Content */
    background-color: #267890;
    border: 5px solid #14414e;
}
p {
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    //单行省略号
    overflow: hidden;
    font-size: 16px;
    line-height: 28px;
    /*
    多行省略号
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;在第几行出现省略号
    */
 }

②、clear：both；
③content: " "; display: block;

创建BFC元素，它的边框盒不会与浮动元素重叠

.box1{
    border: 5px solid #d2b48c;
    overflow: hidden;
    float: left;
}

.box2{
    width: 100%;
    height: 100px;
    background-color: sandybrown;
}