码迷,mamicode.com
首页 > 其他好文 > 详细

浮动元素的清除

时间:2016-12-04 14:25:56      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:height   clear   标签   family   在家   就会   --   隐藏   失效   

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

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

浮动元素的清除

标签:height   clear   标签   family   在家   就会   --   隐藏   失效   

原文地址:http://www.cnblogs.com/ljjblogs/p/6130663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!