HTML文档流中设置元素浮动导致父元素高度无法自适应怎么办

小编给大家分享一下HTML文档流中设置元素浮动导致父元素高度无法自适应怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
　　元素浮动定义
　　float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
　　如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
　　注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
　　why 子元素浮动会导致父元素高度塌陷？
　　这是因为内部的元素设置float:left || right后，就丢失了clear:both和display:block（持怀疑态度）的样式，所以外部的父容器不会被撑开。
　　举个：
　　子元素未设置浮动，父元素自动被撑开
　　
　　
　　
　　
　　
　　

　　.father {
　　width: 400px;
　　border: 1px solid blue;
　　}
　　.son {
　　width: 200px;
　　height: 200px;
　　border: 1px solid red;
　　background-color: yellow;
　　}
　　
　　子元素设置浮动，父元素高度塌陷
　　
　　
　　
　　
　　
　　

　　.father {
　　width: 400px;
　　border: 1px solid blue;
　　}
　　.son {
　　width: 200px;
　　height: 200px;
　　border: 1px solid red;
　　background-color: yellow;
　　float: left;
　　}
　　
　　闭合浮动的常见解决方案
　　最终，我们要的效果是要跟没设置浮动之前的效果一样，让父元素高度自适应：
　　在浮动元素之后添加清除浮动的子元素：
　　
　　
　　
　　
　　

　　.father {
　　width: 400px;
　　border: 1p免费云主机域名x solid blue;
　　}
　　.son {
　　width: 200px;
　　height: 200px;
　　border: 1px solid red;
　　background-color: yellow;
　　float: left;
　　}
　　.clearFloat {
　　width: 100%;
　　height: 0;
　　clear: both;
　　}
　　
　　父元素设置 overflow: hidden
　　
　　
　　
　　

　　.father {
　　width: 400px;
　　border: 1px solid blue;
　　overflow: hidden;
　　}
　　.son {
　　width: 200px;
　　height: 200px;
　　border: 1px solid red;
　　background-color: yellow;
　　float: left;
　　}
　　
　　是不是很神奇！因为子元素的浮动，会导致父元素误认为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;
　　}以上是“HTML文档流中设置元素浮动导致父元素高度无法自适应怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注百云主机行业资讯频道！

相关推荐: 用CSS改变图片颜色的方法有哪些

本文小编为大家详细介绍“用CSS改变图片颜色的方法有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“用CSS改变图片颜色的方法有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。前言“说到对图片进行处理，我们经常会想到Photo…