hello 朋友们，我又来了哦！对的没错，今天的话题呢就是高度塌陷。 　　首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度（即父元素高度靠子元素撑起来），并且子元素添加了浮动时，内容无法撑起父元素的高度，即父元素发生高度塌陷。 　　解决办法： 　　　　第一种，开启元素 ...

一、CSS浮动 浮动（float）的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。当浮动框高度超出包含框 ...

正常情况 如果子元素没有设置浮动（float），父元素的高度会随着子元素高度的改变而改变的。 设置浮动以后 父元素的高度不会随着子元素的高度而变化。 例如：在一个ul中定义若干个li，并设置float='left' 显示结果就会是这样： 解决办法 最简单的方法是，给父元素 ...

问题的产生 文档流中父元素高度默认由子元素撑开 代码： 效果： 为子元素添加浮动后，子元素脱离文档流，无法撑起父元素，导致父元素高度塌陷 清除浮动的方法 第一种：开启BFC 根据W3C的标准，在页面中元素都有一个隐含的属性 Block ...

浮动元素使其父元素高度塌陷 我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离 ...

费话不多说，直接上问题： 1.开始时，页面只有两个DIV的嵌套（见图） 运行结果是： 现在看运行的是正常的，但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样的： 图中可以看出，box1中已经没有了任何高度，这是由于box2设置了浮动属性 ...

浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。下面就从一开接触前端时，渐渐发现解决高度塌陷的问题的方式。 一、给浮动元素的父级元素添加固定的高度css【height:200px】 　　 很多时候就是不想把如下布局中的父极元素的高度定死，讲究 ...

当子元素不浮动的时候，父元素的高度是由子元素撑起来的。 子元素A和B是两个div，独占一行 效果如图： 当子元素B浮动起来之后，父元素高度塌陷到只剩子元素A的高度 效果如图： 当给子元素A（div）设置CSS属性：display ...