浮动元素的清除: 每个浮动元素之间都是会相互影响的,从而要清除浮动元素。方法有:
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(溢出隐藏 )属性,那么,父亲就会被儿子撑出高度。
来源:https://www.cnblogs.com/ljjblogs/p/6130663.html