浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。
一、浮动造成父级高度塌陷的原因
子级使用浮动后，会脱离文档流。父级占据原来的位置，此时父级也没有设置高度，没有内容撑开父级高度。
html部分：
<div id="box">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
</div>
css样式部分：
<style type="text/css">
#box{
width:300px;
border:5px solid red;
}
.btn1{
width:40px;
height:100px;
background:grey;
float:left;
}
.btn2{
width:100px;
height:110px;
background:skyblue;
float:left;
}
.btn3{
width:150px;
height:120px;
background:orange;
float:left;
}
</style>
效果图：
二 、解决浮动带来的父级高度塌陷问题
方法一：给父级元素添加高度
这种方法只适用于已知子级元素高度且后续不在更改元素的高度使用。给父级元素一定的高度，表面上是可以解决高度塌陷问题，当子级元素的高度改变后，子级高度过大会导致浮动元素超出父级边框，子级高度过小会导致父级底部区域有空白。这样就不利于后续元素调整大小操作。
很多时候就是不想把如下布局中的父极元素的高度定死，讲究的是自适应，从而才出现了高度塌陷的问题，因此，该方法一般都不适用。
#box{
width:300px;
border:5px solid red;
/* 设置父级元素高度等于子级浮动元素高度最大的值 */
height:120px;
}
效果图：
方法二：给父级元素超出隐藏
当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉。当子元素浮动时，给父元素添加overflow：hidden，按照它的特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
#box{
width:300px;
border:5px solid red;
/* 父级溢出隐藏 */
overflow:hidden;
}
效果图：
但由于overflow是一种样式的属性，但是有时候可能会影响元素的样式，所以不要作为主要清理浮动方式。
方法三：给父级元素也添加浮动
让父元素与子元素一起脱离文档流浮动起来，保证了子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有弊端，父级元素脱离文档流，不占据原来的位置，一定会影响父元素之后的元素排列。
#box{
width:300px;
border:5px solid red;
/* 父级元素也浮动 */
float:left;
}
效果图：
方法四：设置父级为行块级元素
代码体如图所示：
*
{
margin:0PX;
padding:0px;
}
#box{
width:300px;
border:5px solid red;
/* 设置父级为行块级标签 */
display:inline-block;
}
效果如下：
父级元素设置为行块级后，会造成父级元素与兄弟元素之间有空隙，这个空隙不是内外边距造成的，是系统默认的无法清除。因此也不建议使用。
方法五：清除浮动
清除浮动，但是要添加一个div标签，而且要保证在所有要清除浮动的后面添加clear。
<body><!--主题内容开始-->
<div id="box">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div style="clear:both"></div>
</div>
</body><!--主题内容结束-->
清楚浮动的方式一般情况下都是可行的，容易理解，而且兼容所有浏览器、随用随清，但需要添加大量无语义的html元素，且只能清除前面的浮动，其后面兄弟的元素浮动不能清除浮动，因此这种方式也不是很完美。
方式六：万能清除法：after伪元素+清除浮动
html部分
<body><!--主题内容开始-->
<div id="box clearfix">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
</div>
<p>我是辅助我是辅助我是辅助我是辅助<p>
</body><!--主题内容结束-->
Css样式：
.clearfix::after{
content:"";
display:block;
clear:both;
}
这类方式叫万能清楚法，只要能给元素添加class类名即可，不会有无用的空标签，也不会修改父级元素的样式，推荐使用。
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
