代码如下可自行测试：
方法一：（前提条件： 要知道子元素 内容的高度，然后 按需设置 父元素的高度）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动的 方法</title> <style type="text/css"> /* 不清楚浮动 效果 */ /**/ .ft-parent { background-color: yellow; border: 1px dashed red;} .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } /* 方法一：效果 (条件： 要知道子元素 内容的高度，然后 按需设置 父元素的高度)*/ /* .ft-parent { background-color: yellow; border: 1px dashed red; height: 102px;} .ft-l { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } */ </style> </head> <body> <div class="ft-parent"> <div class="ft-l"></div> <div class="ft-r"></div> </div> </body> </html>
方法二：（父元素 添加 overflow:hidden;）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动的 方法</title> <style type="text/css"> /* 不清楚浮动 效果 */ /**/ .ft-parent { background-color: yellow; border: 1px dashed red;} .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } /* 方法二：效果 */ /* .ft-parent { background-color: yellow; border: 1px dashed red; overflow: hidden;} .ft-l { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } */ </style> </head> <body> <div class="ft-parent"> <div class="ft-l"></div> <div class="ft-r"></div> </div> </body> </html>
方法三：（在父级“</div>”结束前加此div引入“class="clear"”样式 —> .clear { clear:both;}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动的 方法</title> <style type="text/css"> /* 不清楚浮动 效果 */ /* .ft-parent { background-color: yellow; border: 1px dashed red;} .ft-l { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } */ /* 方法三：效果 ()*/ /**/ .ft-parent { background-color: yellow; border: 1px dashed red; } .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left; } .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right; } .clear { clear: both; } </style> </head> <body> <div class="ft-parent"> <div class="ft-l"></div> <div class="ft-r"></div> <div class="clear"></div> </div> </body> </html>
方法截图总结：
