浮动元素的清除

点点圈 提交于 2020-03-27 00:38:39

浮动元素的清除: 每个浮动元素之间都是会相互影响的,从而要清除浮动元素。方法有:

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(溢出隐藏 )属性,那么,父亲就会被儿子撑出高度。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!