未使用浮动前
使用浮动后
float 属性使盒子脱离标准流,浮动的盒子在一行上显示。
清除浮动后
清除浮动的方法
- 给父盒子设置高度。
- 给父盒子使用伪元素清除浮动。
.clearfix:after{
content: "";
display: block;
clear: both;
}
- 额外标签法,在浮动元素后面添加额外标签。
<div style="clear:both;"> </div>
4.给父盒子添加overflow:hidden属性。
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
/* float 使盒子脱离标准流,浮动的盒子在一行上显示 */
/* 行内元素浮动后转为行内块 */
.div1 {
background-color: pink;
/* overflow: hidden; */
}
.red,.green,.yellow{
width: 300px;
height: 300px;
}
.red{
background: red;
float: left;
}
.green{
background: green;
float: left;
}
.yellow{
background: yellow;
float: right;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
/* 让.clearfix兼容IE浏览器 */
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="div1">
<!-- <div class="div1 clearfix"> -->
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<!-- <div style="clear: both;"></div> -->
</div>
</body>
</html>