HTML中清除浮動帶來的影響
阿新 • • 發佈：2019-02-04
清除浮動帶來的影響有兩種方法：
1、利用clear屬性
2、利用after偽類
舉例說明：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #header{ height: 100px; background-color: red; } #body{ /*height: 300px;*/ background-color: yellow; } #left{ height: 280px; width: 15%; background-color: #4cae4c; float: left; } #center{ height: 280px; width: 70%; background-color: #3c763d; float: left; } #right{ height: 280px; width: 10%; background-color: green; float: left; } #bottom{ height: 10%; background-color: #ffceb6; /*清除浮動元素帶來的影響*/ clear: both; } /*清除浮動的方式二：利用偽類after*/ .clearfix:after{ content: ""; display: table; clear: both; } #foot{ height: 100px; background-color: #2e6da4; } </style> <title>Float浮動</title> </head> <body> <div> <div id="header"></div> <div id="body" class="clearfix"> <div id="left">左側div</div> <div id="center">中間div</div> <div id="right">右側div</div> <!-- <div id="bottom">底部div</div>--> </div> <div id="foot"></div> </div> </body> </html>
