浮动高度崩溃问题BFC

时间：2023-03-31 12:16:56 CSS

58-59讲浮动三个水平排列的块级div：不脱离文档流显示：inline-block可以把它们变成内联块元素，但是写法必须是this和every两个div必须相邻，中间不能有空隙

下面垂直排列会有空隙

留文档流很简单，略。漂浮注意事项无论怎么漂浮，都逃不过如来（父母）的手掌。当前面的元素浮动时，后面不浮动的元素尝试跑到左上角（drillup）。当前面的元素不浮动，并且是块级元素时，块级元素会挡住后面的浮动元素（钻孔不会移动），浮动会有文字环绕的效果。当块级元素不脱离文档流时，只设置一个高度，默认宽度为父元素的宽度。这时在离开文档流后设置一个宽度为0的float。如果div里面没有文字内容，你会发现div消失了。内联元素离开文档流后，效果与块元素离开文档流后的效果相同。它不会超出其正上方的浮动元素。如下图，div1和div2向左浮动，div3向右浮动。发现div3不在div1的右边。本讲要记住的知识点很多。注意离开文档流后宽高的变化。比较迷惑的是display:inline-block，效果差不多，但是display:inline-block没有脱离文档流，元素中间有空隙。61-62讲高度塌陷的问题在文档流中，父元素的默认高度没有设置为被子元素拉伸。当子元素脱离文档流时，父元素的高度就会塌陷。随着父元素的折叠，父元素后面的元素也会挤起来，导致页面布局发生变化。解决方案一：设置父元素的高度，但是当子元素的高度变大时，父元素无法自动增加，就会发生溢出。什么是BFC块级格式化上下文（BlockFromattingContext），页面上的每个元素都有一个名为“BFC”的隐藏属性，默认是关闭的。开启后有如下特点：父元素的垂直外边距不会和子元素的外边距重合如何为元素开启BFC设置元素为浮动设置元素为绝对位置设置将元素设置为inline-block将元素的overflow设置为不可见值解决方案2为父元素启用BFC，上面的第四种方法是overflow:hiddenwiththeleastsideeffects或者overflow:autoIE6解决方案不知道BFC在IE6上，但是有一个hasLayout与之对应，可以直接设置属性zoom:1来解决折叠问题，zoom就是将元素放大多少倍。zoom:1一般没有破绽。最后设置如下，解决大部分浏览器的高度塌陷问题：overflow:hidden;zoom:1;

上一篇：min-max-width-height的理解

下一篇：前端深入css篇丨2020年之前，彻底掌握css动画【改造】

浮动高度崩溃问题BFC相关文章