基本作用
清除浮动元素对块元素产生的影响
| 可选值 | 效果 |
|---|---|
| left | 清除左侧浮动元素的影响 |
| right | 清除右侧浮动元素的影响 |
| both | 清除两侧中最大一侧的影响 |
- 原理：设置clear后，浏览器自动为元素增添外边距，使其位置不发生变化
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
float:left;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
clear:both;
}
显示效果
解决高度塌陷
设置::after伪元素，利用clear属性消除浮动元素对其布局的影响，使得父元素能由于其存在而保持高度
<head>
<style>
.outer{
border: red 10px solid;
}
.inner{
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.outer::after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
显示效果
- 设置outer的::after，而不是inner的
- clear属性对块元素生效，::after相当于添加一个行内元素，需要用display改变
