两个浮动元素,造成父元素无法被撑起来
1.clearfix可以解决
2.display:flow-root(display新属性,可替代clearfix)
@supports(display: flow-root){ .wrapper{display: flow-root;} .wrapper::after{content:none;} } .wrapper{background: #98cac7;} .wrapper::after{content:'';display: table;clear:both;} .floatElement{width:100px;height: 100px;border:5px solid #1098AD;float: left;text-align: center;} <div class="wrapper"> <div class="floatElement">浮动元素</div> <div class="floatElement">浮动元素</div> </div>