<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .divcss5 { width: 400px; 第一种方式:直接给父元素设置高度; /*height: 400px;*/ border: 1px solid #F00; background: #FF0; 第二种方式:将父元素设置为溢出隐藏; /*overflow: hidden;*/ } .divcss5-left, .divcss5-right { width: 180px; height: 100px; border: 1px solid #00F; background: #FFF } .divcss5-left { float: left } .divcss5-right { float: right } 第三种方式:在父元素后面设置伪元素 .divcss5:after{ content: ''; height: 0; line-height: 0; clear: both; display: block; visibility: hidden; } 第四种方式:在父元素下添加一个新的div,清除所有浮动 .clear{ clear: both; } </style> </head> <body> <div class="divcss5"> <div class="divcss5-left">left浮动</div> <div class="divcss5-right">right浮动</div> </div> </body> </html>