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

Posted 2020-10-10 liangyuqi

条件：

父元素中有子元素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;

 

        }