html高度塌陷问题解决

Big_fat_cat 发布于2019-04-23 13:22 / 854人阅读

摘要：但是会导致宽度丢失，不推荐使用这种方式将元素的设置非值解决父元素高度塌陷副作用最小的兼容性在中没有但是具有另一个隐含的属性叫该属性的作用和类似，所在浏览器通过开启来解决问题。

高度塌陷的问题：

   当开启元素的BFC以后，元素将会有如下的特性

   1 父元素的垂直外边距不会和子元素重叠
   开启BFC的元素不会被浮动元素所覆盖
   开启BFC的元素可以包含浮动的子元素

   如何开启元素的BFC

   设置元素浮动
   设置元素绝对定位
   设置元素为inline-block

   float:left; (不好) 虽然可以撑开父元素会导致父元素宽度丢失了

   而且使用这种方式导致下边的元素上移。

   display:inlink-block;

   布局好了，但是宽度又没有了。但是会导致宽度丢失，不推荐使用这种方式

   4 将元素的overflow 设置非visible值

   overflow:visible

   overflow:auto; 解决父元素高度塌陷副作用最小的
           hidden;

兼容性

在IE6中没有BFC, 但是具有另一个隐含的属性叫hasLayout.

该属性的作用和BFC类似，所在IE6浏览器通过开启hasLayout来解决问题。

方式：

    元素的zoom设置为1即可

    zoom:1

    在 IE6中如果为一个元素指定了一个宽度，则会默认开启一个

    hasLayout.

clear: both 清楚对他影响最大的那个元素的浮动

解决高度塌陷的方案二

    可以直接在高度塌陷的父元素的最后，添加一个空白的div

    由于这个div并没有浮动，他是可以撑开父元素高度的

    然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

    虽然可以解决问题啊，但是在页面中添加多余的结构。

   **********************************   ==>    通过after伪类设置为块级元素清除两边浮动解决父类塌陷的问题

    通过after伪类，选中box1的后边

    .box1:after{

        content:"";
        display:block;

        //清除两侧的浮动

        clear:both;

    }

    IE6不支持伪类。 zoom:1;

    .clearfix:after{
        /*添加一个内容*/
        content:"";
        /*转换为一个块元素*/
        display:block;
        /*清除两侧的浮动*/
        clear:both;
    }

    /*在IE6中不支持after伪类，
    所以在IE6中还需要使用hasLayout来处理*/

    .clearfix{
        zoom:1;
    }

IE6中如果上面的是内联元素   也是浮不上去的

终极版：

//经过修改后的clearfix是一个多功能的
//既可以解决高度塌陷，又可以确保父元素
和子元素的垂直外边距重叠

.clearfix:before,
.clearfix:after{
   content:"";
   display:table;
   clear:both;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1793.html

CSS-高度塌陷问题

摘要：可以得出产生高度塌陷的原因在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。目录 CSS-高度塌陷问题表现产生的原因高度塌陷的解决办法： ...

Vultr 2019-04-23 11:57 评论0 收藏0
解决高度塌陷问题

摘要：但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。所谓高度塌陷就是在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致...

zhoutao 2019-04-23 13:11 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
margin合并、塌陷，清除浮动

摘要：合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。那我们怎么办，回到主题清除浮动。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。所以我们最好后，主动清除一下浮动，避免以后遇到很奇怪的问题。这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知...

Alliot 2019-08-30 15:55 评论0 收藏0
margin合并、塌陷，清除浮动

摘要：合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。那我们怎么办，回到主题清除浮动。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。所以我们最好后，主动清除一下浮动，避免以后遇到很奇怪的问题。这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知...

MadPecker 2019-08-02 14:01 评论0 收藏0