html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...

元素浮动定义

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

why 子元素浮动会导致父元素高度塌陷？

这是因为内部的元素设置float:left || right后，就丢失了clear:both和display:block（持怀疑态度）的样式，所以外部的父容器不会被撑开。

举个：

子元素未设置浮动，父元素自动被撑开

<body><div class="father"><div class="son"></div></div></body>
<style>.father {width: 400px;border: 1px solid blue;}.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;}
</style>

子元素设置浮动，父元素高度塌陷

<body><div class="father"><div class="son"></div></div>
</body>
<style>.father {width: 400px;border: 1px solid blue;}.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;}
</style>

闭合浮动的常见解决方案

最终，我们要的效果是要跟没设置浮动之前的效果一样，让父元素高度自适应：

在浮动元素之后添加清除浮动的子元素：

<div class="father"><div class="son"></div><div class="clearFloat"></div>
</div>
<style>
.father {width: 400px;border: 1px solid blue;
}
.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;
}
.clearFloat {width: 100%;height: 0;clear: both;
}
</style>

父元素设置 overflow: hidden

<div class="father"><div class="son"></div>
</div>
<style>
.father {width: 400px;border: 1px solid blue;overflow: hidden;
}
.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;
}
</style>

是不是很神奇！因为子元素的浮动，会导致父元素误认为content高度为0（即蓝色边框为一条线），所以父元素设成overflow:hidden溢出隐藏的话，直觉上应该子元素由于溢出导致不显示才对。但真实效果是：父元素设成overflow:hidden溢出隐藏后，父元素高度居然自适应了！这是怎么回事呢？是因为 BFC（Block Formatting Context），感兴趣的童鞋，点击链接了解一下哈...

用 :after 伪元素，思路是用:after元素在div后面插入一个隐藏文本”.”，隐藏文本用clear来实现闭合浮动

.father:after {clear: both;content: ".";   //任意文本如“dfgdfg”display: block;height: 0;      //高度为0且hidden让该文本彻底隐藏visibility: hidden;
}

更多大型互联网web前端实战操作，在线解析，学习指导，学习资源，点：【WEB前端资源】