bfc渲染规则

最新推荐文章于 2024-03-13 10:50:08 发布

m0_73749440

最新推荐文章于 2024-03-13 10:50:08 发布

阅读量75

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_73749440/article/details/127479850

版权

1.3 BFC渲染规则（特性）

内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，

即使存在浮动也是如此
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
BFC的区域不会与float box重叠
计算BFC的高度时，浮动元素也参与计算

1.4 BFC解决的问题

清除浮动
防止margin重叠
避免文字环绕
自适应两栏布局

2、溢出显示省略号

3.1 、单行文本溢出显示省略号

            /* 文本强制不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 溢出显示省略号 */
            text-overflow: ellipsis;

3.2、单行文本溢出显示省略号

.box {
    width: 200px;
    line-height:30px;
    height:90px;
    background-color: red;

    position:relative;
    text-align:justify;
    overflow: hidden;
}