<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>65-清除浮动方式一</title> <style> *{ margin: 0; padding: 0; } .box1{ height: 20px; background-color: red; } .box2{ background-color: green; } .box1 p{ width: 100px; background-color: blue; } .box2 p{ width: 100px; background-color: yellow; } p{ float: left; } </style> </head> <body> <!-- 1.清除浮动的第一种方式 给前面一个父元素设置高度 注意点: 在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少 --> <div class="box1"> <p>我是文字1</p> <p>我是文字1</p> <p>我是文字1</p> </div> <div class="box2"> <p>我是文字2</p> <p>我是文字2</p> <p>我是文字2</p> </div> </body> </html>
