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

元素浮动造成父元素高度塌陷 解决办法

时间:2017-10-09 22:39:44      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:tab   color   布局   flow   str   span   splay   .com   独立   

条件:

父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局;

 

解决方案:

1.直接给父元素定高;

弊端:必须知道父元素的高;

 

2. 父元素使用overflow属性值为hidden解决;

   弊端:会隐藏溢出的内容,(当需要隐藏时使用,按需使用)

   为什么用这个属性可以清除浮动带来的影响呢?

   当父元素存在height时(如30px),子元素(如50px)则会被溢出隐藏(只显示30px)。

   但是当父元素不存在高度时,此时设置overflow:hidden,则浮动的子元素还会撑开父元素,

   因为块级格式化上下文通常可以包含浮动

    父元素创建了新的BFC,创建了的BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档中的普通流。

    参考自:http://www.iyunlu.com/view/css-xhtml/55.html

 

3.在父元素中最后面未知添加一个块级元素或table属性元素,并加clear属性值为both; 

弊端:页面中多了一个空元素(影响不大,算是很nice)

 

4.父元素:after伪元素

 

div:after{

 

            content:"";

 

            display:block;

 

            clear:both;
            height:0;

 

        }

 

元素浮动造成父元素高度塌陷 解决办法

标签:tab   color   布局   flow   str   span   splay   .com   独立   

原文地址:http://www.cnblogs.com/coderL/p/7642965.html

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