清除浮动 clearfix

蔚落 2022-08-21 10:59 152阅读 0赞

#### 我是一名“土八路”，专业并非软件工程，只是自己喜欢前端，自学而成！写博客只是为了记录自己的学习之路。内容质量固然不是很高！如果有什么缺点，不对的地方请大神指正！如果能意外帮到网友的话，那是我的荣幸了！废话这么多了 开始了！ ####

在页面布局的时候！时常会要用到浮动。比如导航栏 左边是logo 右边就是链接！这里我用2个宽高100的box代替

![Image 1][] ![Center][]

写完导航之后，我去body内容的时候，发现原来200高的body 也不能正常显示了，就像这样。

![Image 1][] ![Center 1][]

后来才知道，float让div脱离文档流了！需要清除浮动！ 然后找了clearfix

![Image 1][] ![Center 2][]

加完之后，body就能正常显示了。

![Image 1][] ![Center 3][]

代码如下！

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    		}
    		.pull-left{
    			float: left;
    		}
    		.pull-right{
    			float: right;
    		}
    		.box{
    			width: 100px;
    			height: 100px;
    			text-align: center;
    			font-size: 40px;
    			font-weight: bold;
    			background-color: blue;
    		}
    		.box1{
    			background-color: red;
    		}
    		.test{
    			height: 200px;
    			background-color: green;
    		}
    		.clearfix:before,{
    			content: "";
    			display: table;
    		}
    		.clearfix:after{
    			content: "";
    			display: table;
    			clear: both;
    		}
    	</style>
    </head>
    <body>
    	<div class="clearfix">	
    		<div class="pull-left box">logo</div>
    		<div class="pull-right box box1">list</div>
    	</div>
    	<div class="box test">body</div>
    </body>
    </html>

[Image 1]: 
[Center]: /images/20220724/f247ce571d244ffabebfc74e5b9863e8.png
[Center 1]: /images/20220724/335d7a0898dc473e8aec4bac03bce03d.png
[Center 2]: /images/20220724/e9fc7101228a4e1382e3456c8869bc98.png
[Center 3]: /images/20220724/74a78102e52844f58d0eff457bbec394.png