<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { width: 700px; /*如果去掉了高度， 标签里的子元素都浮动，不在标准流里面，下面的标签会顶上来， 会认为上一个标签没有设置高度，有时候我们还必须不设置高度，动态数据流*/ /* height: 500px; */ background-color: skyblue; margin: 0 auto; } .left { width: 200px; height: 300px; background-color: bisque; float: left; } .right { width: 400px; height: 500px; background-color: cadetblue; float: right; } .bottom { width: 1200px; height: 100px; background-color: aquamarine } /* 方式一：添加块元素 ，进行清除浮动 */ /* .top .fixClear{ clear: both; } */ /* 方式二 单伪元素清除法 ,清除浮动*/ /* .clearFix::after{ content: ''; display: block; clear: both; } */ /* 方式三 使用overflow:hidden ,进行清除浮动*/ .top{ overflow: hidden; } </style> </head> <body> <div class="top clearFix"> <div class="left">aaa</div> <div class="right">bbb</div> <div class="fixClear"></div> </div> <div class="bottom"> </div> </body> </html>