• 注册
当前位置:1313e > 默认分类 >正文

清除盒子内子元素浮动导致父元素塌陷的5种方法

更详细的解释请移动到

  地址1:http://www.cnblogs.com/chedabang/p/5973601.html

  地址2:https://www.cnblogs.com/libin-1/p/5975367.html        

盒子塌陷是什么?

何为盒子塌陷盒子塌陷是由于子元素浮动导致的子元素脱离标准文档流父元素无法获取子元素的高度而出现的一种现象。

盒子塌陷(如下):

盒子未塌陷(如下):

 

 

HTML/CSS代码

 

....
// css
.box-wrapper {border: 5px solid red;
}
.box-wrapper .box {float: left; width: 100px; height: 100px; margin: 20px; background-color: green; } // html 
class="box-wrapper">
class="box">
class="box">
class="box">
....

 

 

 

浮动是什么?

浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素

解决框架塌陷的5种方式:

第一种:

  解决方案设置父元素的高度。

  优点:简单,方便。

  缺点:无法自适应后面添加的元素的,即后面用其他方式添加的元素也会出现框架坍塌现象。

  CSS代码:.box-wrapper{height:100px;}     

第二种:

  解决方案:使用overflow:hidden属性

  优点:简单,有效。

  缺点:对进行过定位的元素进行裁剪,即通过定位的子元素溢出父元素的部分会进行隐藏。

  CSS代码:.box-wrapper{overflow:hidden;}

第三种:隔墙法

  解决方案:在需要清除浮动的地方,设置空盒子添加清除属性clear:both进行清除。

  优点:简单,有效。

  缺点:①代码过于冗余,如果出现多处浮动要写多个空盒子,增加了文件的大小。

     ②使用本方法会出现设置margin值异常,空盒子两边的margin会被无效化。

  HTML代码

        或

(CSS代码:.clearbox{clear:both;})

第四种:隔墙法进化版-内墙法

 

  解决方案:在需要清除浮动的地方,设置空盒子添加清除属性clear:both进行清除。

 

  优点:简单,有效解决空盒子两边的margin会被无效化。

 

  缺点:代码过于冗余,如果出现多处浮动要写多个空盒子,增加了文件的大小。

 

  HTML代码以下要设置在需要清除浮动的内部末尾处

        

 

        或

(CSS代码:.clearbox{clear:both;})

 

[推荐]第五种:伪类划分法

  解决方案:使用伪类 :after :before

  优点:有效,可以解决两个盒子之间设置margin值无效的问题。

  缺点:几乎可以忽略不计。

  CSS代码

  /*现代浏览器clearfix方案,不支持IE6/7*/.clearfix:after {display: table;content: " ";clear: both;}/*全浏览器通用的clearfix方案*/  /*引入了zoom以支持IE6/7*/.clearfix:after {display: table;content: " ";clear: both;}.clearfix{*zoom: 1;}/*全浏览器通用的clearfix方案【推荐】*//*引入了zoom以支持IE6/7*//*同时加入:before以解决现代浏览器上边距折叠的问题*/.clearfix:before,.clearfix:after {display: table;content: " ";}.clearfix:after {clear: both;}.clearfix{*zoom: 1;}

 

转载于:https://www.cnblogs.com/GGYC/p/10352414.html

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录