浮动高度塌陷问题 BFC

_Suqin 发布于2019-08-02 16:12 / 2645人阅读

摘要：容易混淆的是，效果几乎一样，但是并没有脱离文档流，并且元素中间有空隙。讲高度塌陷问题在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。

58-59讲浮动 三个块级div水平方向排列： 不脱离文档流

display：inline-block可以把它们三个变为行内块元素,但是书写方式必须是这也每个div必须紧邻，中间不能留有空隙

下面这种垂直排列会留有空隙

脱离文档流

这个就很简单了，略。

浮动的注意事项

不管怎么浮动也逃不出如来(父级)手掌心

当前面的元素浮动后，后面没有浮动的元素尽量往左上角跑(往上钻)

当前面的元素没有浮动，并且是块级元素就会把后面的浮动元素挡住(钻不动)

浮动会出现文字环绕的效果

在不脱离文档流的时候块级元素只设置一个height，默认宽度是父级的宽度。此时设置一个float脱离文档流后宽度就是0，如果该div里面没有任何文字内容的话，你会发现该div消失了

内联元素脱离文档流后和块元素脱离文档流后效果一样

后面的浮动元素不会超过他上面紧邻的浮动元素，如下图div1 div2左浮动，div3右浮动，发现div3并没有在div1的右边

总结

本讲要记的知识点非常多，注意脱离文档流后宽高的变化。容易混淆的是display:inline-block，效果几乎一样，但是display:inline-block并没有脱离文档流，并且元素中间有空隙。

61-62讲高度塌陷问题

在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。由于父元素塌陷，父元素后面的元素也会跟着挤上来，导致页面布局发生了改变。

解决方案一：

给父元素设置高度，但是子元素高度变大后父元素不能自动跟着变大就会发生溢出。

什么是BFC

块级格式化上下文 (Block Fromatting Context),在页面的每个元素都有一个隐藏的属性叫做"BFC"，它默认是关闭的。当它开启后具有如下特性：

父元素的垂直方向外边距不会和子元素外边距重合

开启BFC的元素不会被浮动元素所覆盖(不会往里面钻)

开启BFC的父元素可以包含浮动的子元素

如何开启BFC

设置元素浮动

设置元素绝对定位

设置元素为inline-block

将元素的overflow设为一个非visible的值

解决方案二

给父元素开启BFC，上面的第4种方法是副作用最小的overflow:hidden或者overflow:auto

IE6解决方案

在IE6上面不知道BFC，但是与其对应的有个hasLayout，可以直接设置属性zoom:1来解决塌陷问题，zoom是把元素放大多少倍的意思。zoom:1一般没什么缺陷。

最后

设置为如下可以解决大部分浏览器高度塌陷问题：

overflow:hidden;
zoom:1;

云服务器 GPU云服务器 html5浮动问题 bfc bfc布局 html浮动向上浮动

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

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

浮动高度塌陷问题 BFC

摘要：容易混淆的是，效果几乎一样，但是并没有脱离文档流，并且元素中间有空隙。讲高度塌陷问题在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。 58-59讲浮动三个块级div水平方向排列：不脱离文档流 display：inline-block可以把它们三个变为行内块元素,但是书写方式必须是这也每个div必须紧邻，中间不能留有空隙下面这...

paraller 2019-08-29 18:33 评论0 收藏0
CSS-高度塌陷问题

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

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

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

yankeys 2019-08-29 15:10 评论0 收藏0
解决高度塌陷问题

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

zhoutao 2019-04-23 13:11 评论0 收藏0
html高度塌陷问题解决

摘要：但是会导致宽度丢失，不推荐使用这种方式将元素的设置非值解决父元素高度塌陷副作用最小的兼容性在中没有但是具有另一个隐含的属性叫该属性的作用和类似，所在浏览器通过开启来解决问题。高度塌陷的问题：当开启元素的BFC以后，元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启元...

Big_fat_cat 2019-04-23 13:22 评论0 收藏0