有人負責，才有質量：寫給在集市中迷失的人
阿新 • • 發佈：2022-04-02
浮動清除原因
在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。
但是當為子元素設定了浮動之後，子元素會完全脫離正常文件流，此時會導致子元素無法撐開父元素的高度，從而導致父元素高度塌陷
清除效果
清除方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{text-align: center} #container { width: 500px; height: auto; margin: auto;/*第二種清除浮動，不建議*/ overflow: hidden; } /*第三種清除浮動 after 偽元素*/ /*.clearfix:after{*/ /* content: "020";*/ /* display: block;*/ /* height: 0;*/ /* clear: both;*/ /* visibility: hidden;*/ /*}*/ #header{ width:500px; height:100px; background-color: red; } #left{ width:130px; height:300px; background-color: green; float:left; } #right{ width:350px; height:300px; background-color: blue; float:right; } .footer{ width:500px; height:100px; background-color: yellow; /*clear:both;*/ } </style> </head> <body> <!--浮動，父盒子在浮動作用下，高度塌陷--> <div id="container" class="clearfix"> <div id="header">header</div> <div id="left">side bar</div> <div id="right">main content</div> <!-- 第一種清除浮動的方法 空標籤+樣式clear:both--> <!-- <div style="clear:both;">空標籤</div>--> <!-- <div class="footer">footer</div>--> </div> <div class="test" style="width: 100%;height: 100px;background-color: cyan"> </div> </body> </html>