CSS使用BFC规则布局引发外层div包裹内层div的处理方法

2020-04-30 14:48:45易采站长站整理

            width:600px;   
            height: 300px;   
        }   
        .p{   
            border:solid 3px #a33;   
        }   
        .c{   
            width: 100px;   
            height: 100px;   
            background-color: #060;   
            margin: 10px;   
            float: left;   
        }   
    </style>   
</head>   
<body>   
    <div class="container">   
        <div class="p">   
            <div class="c"></div>   
            <div class="c"></div>   
            <div class="c"></div>   
        </div>   
    </div>   
</body>   
</html>  

我们希望看到的效果是:
201663114154732.png (693×179)

结果出现如下:
201663114218715.png (677×165)

解决方案:
解决方法一般有2种。
1.利用 clear属性,清除浮动
2.使父容器形成BFC
清除浮动的方法,我们可以用如下办法:
对父元素加一个class

XML/HTML Code复制内容到剪贴板

<div class="p floatfix">  
    <div class="c">1</div>  
    <div class="c">2</div>  
    <div class="c">3</div>  
</div>  

添加如下CSS