直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div{ width: 500px; color: white; border: 5px solid red; /* 第五种方法 给其父元素也添加浮动 (不提倡) */ /* float: left; */ /* 第一种方法 给其父元素添加overflow:hidden;可以快速的用简单的代码实现 */ /* overflow: hidden; */ /* 第二种方法 给其父元素添加适合的height; */ /* height: 300px; */ } .div .fle,.rig{ width: 50%; text-align: center; height: 300px; line-height: 300px; } .div .fle{ background-color: aqua; float: left; } .div .rig{ background-color: blueviolet; float: left; } /* 第三种方法 在父元素结束之前添加一个带有clear:both;属性的盒子优点 :可以多次使用,且不必知道其他内容 */ /* .clear{ clear: both; } */ /* 第四种方法 给父元素设置after 伪元素 实际与第三种类似 */ /* .div:after{display:block;clear:both;content:"";visibility:hidden;height:0} */ </style> </head> <body> <div class="div"> <div class="fle">左侧内容</div> <div class="rig">右侧内容</div> <!-- <div class="clear"></div> --> </div> </body> </html>