1.通过父元素overflow:hidden,缺点：超出部分隐藏，不推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{margin:50px;border:1px solid #ddd;overflow:hidden;} .left{float:left;} .right{float:right;} </style> </head> <body> <div class="box"> <div class="left">54</div> <div class="right">33</div> </div> </body> </html>
效果：
方式2：添加空标签并设置clear:both，缺点是额外添加空标签，不推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{margin:50px;border:1px solid #ddd;} .left{float:left;} .right{float:right;} .slot{clear:both;} </style> </head> <body> <div class="box"> <div class="left">54</div> <div class="right">33</div> <div class="slot"></div> </div> </body> </html>
方式3：通过伪类添加，既不会隐藏超出部分，又不多空标签，推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{margin:50px;border:1px solid #ddd;} .box:after{content:'';display:block;clear:both;} .left{float:left;} .right{float:right;} </style> </head> <body> <div class="box"> <div class="left">54</div> <div class="right">33</div> </div> </body> </html>