【CSS】【flow-root】css中的flow-root布局

?flow-root是一个新的块级布局，在block布局的基础上，对子元素的float属性显示效果进行了修正

?我们知道block布局存在高度塌陷的问题，即block布局不会考虑float元素的大小，float元素很大时，会出现float元素溢出容器的情况，如下所示

    
        

            
A
            
B
            
C
        
    

    
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            margin: 50px;
            width: 300px;
            background: yellow;
            border: 1px solid red;
            display: block;
        }

        #item-1 {
            width: 50px;
            height: 400px;
            background: orange;
            text-align: left;
            float: left;
        }

        #item-2 {
            width: 100px;
            height: 50px;
            background: greenyellow;
            text-align: left;
        }

        #item-3 {
            width: 100px;
            height: 50px;
            background: dodgerblue;
            text-align: right;
        }
    

?我们只需改动一个属性，将容器的display属性从block改为flow-root，就可以解决这个问题