CSS---display：flow-root解决float布局弊端

绝世唐门三哥

已于 2022-11-24 16:04:52 修改

阅读量855

点赞数

分类专栏： CSS 另类代码块重点知识文章标签： css 前端 float

于 2022-07-23 23:52:43 首次发布

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/125954531

版权

重点知识同时被 3 个专栏收录

54 篇文章

订阅专栏

CSS

26 篇文章

订阅专栏

另类代码块

6 篇文章

订阅专栏

本文介绍了CSS中的`flow-root`属性，它作为`display`属性的一个值，用于解决因子元素浮动导致的父元素内容塌陷问题。`flow-root`创建了一个无副作用的块格式化上下文（BFC），在不使用`overflow:auto`的情况下，可以避免内容塌陷。文章提供了实例代码展示其用法，并提到该属性在除IE之外的主流浏览器中都有良好支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个CSS相关新属性：flow-root

说明

这个是display属性中的一个属性值：是解决子元素浮动所造成的内容塌陷的问题
即父元素中添加display:flow-root,子元素float浮动
兼容性：除了IE外的浏览器基本全都支持~
一个新的 display 属性的值，它可以创建无副作用的 BFC。
在父级块中使用 display: flow-root 可以创建新的 BFC。

实例

/*该浮动处理等价于下列样式代码*/
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    display: flow-root;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}   
/*********display: flow-root;****overflow: auto;***********************/ 
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}