高度塌陷问题（overflow与clear）
Posted goodgirl----xiaomei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高度塌陷问题（overflow与clear）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.box1{
border: 5px solid red;
/*根据W3C的标准，在页面中元素都隐含的属性叫BFC
* BFC,该属性可以设置打开和关闭，默认是关闭的
* 当开启元素BFC以后，元素将会有以下的特性
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素
*
*/
/*
*如何去开启元素的BFC
* 1.设置元素的浮动
* -使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
* -而且使用这种方式也会导致下边元素的上移，不能解决问题
* 2.设置元素的绝对定位（2的效果同1）
* 3.设置元素为inline-block（效果没有宽度）
* 以上3中不推荐
* 4.将元素的overflow设置为一个非visible
*/
/*float:left;*/
/*position: absolute;*/
/*display: inline-block;*/
/*overflow: hidden; */
/*ie6以下的浏览器，并不支持BFC，而是使用haslayout
* 该属性的作用和BFC类似，所以IE6浏览器可以通过haslayout来解决问题
* display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
作用最小的：
zoom
*
*
* */
/*zoom表示放大的意思，后面跟著一個數值，写几就将元素放大几倍*/
/*zoom:3;*/
}
.box2{
width: 100px;
height: 200px;
background-color: #000000;
float:left;
}
.box3{
height: 100px;
background: green;
}
/*
*clear可以用来清除其他浮动元素对当前元素的影响
* 可选值： none
* left
* right
* both
*/
.clearfix:after{
/*添加一个内容*/
content:"";
/*转化为一个块元素*/
display: block;
/*清除两侧浮动*/
clear: both;
}
</style>
</head>
<body>
<!--
在文档流中，父元素的高度默认是被子元素撑开的
也就是子元素多高，父元素就多高
但是当为子元素设置浮动以后，子元素 会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样会导致页面的布局混乱
所以在开发中一定要避免出现高度塌陷的问题
解决方法：
1.父元素的宽高是写死，定上宽高。（但是，不建议使用）
2.开启BFC
3.添加一个空白的div，设置clear：both；清除浮动
-->
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
<p>我是p段落</p>
</body>
</html>
以上是关于高度塌陷问题（overflow与clear）的主要内容，如果未能解决你的问题，请参考以下文章