解决浮动元素导致其父元素高度塌陷的问题
当一个子元素开启浮动时，会导致其父元素的高度塌陷，如下所示
父元素未设置宽高，仅有一个5像素的边框，可见上下边框已经重合，父元素高度塌陷，子元素从父元素中溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.one {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box {
background-color: red;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
方法一、给父元素设置浮动
.box {
float:left;
}但是如果父元素还有一个兄弟元素，此时兄弟元素会因为父元素的浮动而上移
方法二、给父元素添加clearFix伪类属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.one {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box {
background-color: red;
border: 5px solid black;
}
.box2 {
background-color: yellow;
height: 400px;
}
.clearFix:after {
content: "";
display: block;
/* 清除上面元素的浮动，可选值有left、both、right */
clear: both;
}
</style>
</head>
<body>
<div class="box clearFix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="box2"></div>
</body>
</html>
此方法既能解决父元素高度塌陷问题，也可使父元素占据整行，不会影响到下面兄弟元素的布局
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
