浮动元素的清除
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动元素的清除相关的知识，希望对你有一定的参考价值。
浮动元素的清除: 每个浮动元素之间都是会相互影响的，从而要清除浮动元素。方法有：
1、没有高度的父亲盒子能被儿子撑出高度，但儿子成为浮动元素后，父亲盒子将不会有高度。所以给父亲元素一个高度（足够高），就能清除浮动了。
2、clear：both ：给后一个选择器增加 clear:both属性 ，但此时margin(外边距)失效了（其实不是真正的失效，原因还是父盒子没有高度，当达到一定高度，会有margin）
3、隔墙法：在两个盒子之间建一堵墙（<div></div>）
.cl{
clear: both;
margin: 10px; /*margin没有作用*/
}
.h16{
height: 10px;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
</div>
<div class="cl h16">
<!-- 隔墙 ，一个标签可同时携带多个各类 -->
</div>
<div>
<p class="p2"></p>
</div>
</body>
</html>
4、内墙法：直接放在盒子里，并且墙所在的盒子会有高，墙可有背景颜色。
<div>
<p></p>
<p></p>
<div class="cl"></div>
</div>
以上可以当作一个公式用，当两个P都浮动时，div不能被撑出高 ，在家里修一堵墙 ，就能够让div被儿子撑出高。
5、overflow:hidden : 一个父亲盒子不能被自己浮动的儿子撑出高度，但是只要给父亲加上overfloe:hidden(溢出隐藏 )属性，那么，父亲就会被儿子撑出高度。
以上是关于浮动元素的清除的主要内容，如果未能解决你的问题，请参考以下文章