为什么要清浮动
浮动会使当前元素脱离当前文档流，造成父元素高度塌陷，父元素不会被撑开，计算父元素高度时不会加上子元素高度
举个栗子：
<body>
<div class="box1 clearfix">
<div class="float">float left</div>
<div class="text">文本内容</div>
</div>
<div class="box2">另一个div</div>
</body>
css样式为
/* 清除浮动 */
.box1 {
width: 500px;
border: 2px solid blue;
}
/* 浮动元素 */
.float {
width: 100px;
height: 100px;
border: 2px solid red;
color: red;
margin: 4px;
/*设置元素左浮动*/
float: left;
}
.box2 {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
/* 文本内容 */
.text {
color: green;
margin: 10px;
border: 2px solid green;
}
效果如下：
这个显然不是我们要的效果，父元素高度未撑开，同时绿色框中的内容应该排列在浮动元素下方。
解决这些问题就需要清除浮动，下面就来介绍清楚浮动的方法
清除浮动的方法
1.利用clear属性
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
给要清除浮动的元素加上如下样式：
.text {
color: green;
margin: 10px;
border: 2px solid green;
clear: both;
}
2.父元素结束标签之前插入清除浮动的块级元素
<body>
<div class="box1 clearfix">
<div class="text">文本元素</div>
<div class="float">float left</div>
</div>
<div class="box2">另一个div</div>
</body>
如果将浮动元素放在文本元素的下方，上述的方法就不再适用了，因为文本元素的位置已经确定了，无法清除周围的浮动
就需要在父元素结束标签之前插入清除浮动的块级元素，这样也可以达到清除浮动的效果
注意：必须是块级元素
<body>
<div class="box1 clearfix">
<div class="text">文本元素</div>
<div class="float">float left</div>
<div class="another"></div>
</div>
<div class="box2">另一个div</div>
</body>
css样式
.another {
clear: both;
}
3.利用伪元素
在父元素上添加一个clearfix
html结构
<body>
<div class="box1 clearfix">
<div class="float">float left</div>
<div class="text">文本元素</div>
</div>
<div class="box2">另一个div</div>
</body>
css样式
.clearfix:after {
content: '';
height: 0;
display: block;
clear: both;
}
因为伪元素其实就是添加一个虚拟的元素，所以其实本质上和第二种方法是一样的
4.利用overflow清除浮动
给父元素添加 overflow:auto
html结构
<body>
<div class="box1 clearfix">
<div class="float">float left</div>
<div class="text">文本元素</div>
</div>
<div class="box2">另一个div</div>
</body>
css样式
.box1 {
width: 500px;
border: 2px solid blue;
overflow: auto;
}
使用overflow清除浮动的原理是创建了一个BFC，BFC的高度是要包含浮动元素的，所以高度被撑起来了，达到了清除浮动的目的，
创建BFC的方法不止一种，所以创建BFC的方法都可以清除浮动
4772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
