float:浮动,使元素同行排列,脱离文档流。
我们经常使用float进行布局,但也有一些问题存在,需要清除浮动元素的影响。下面说一下清除浮动的方法。
1.使用伪元素 :after
(推荐使用)
给使用浮动的父元素添加伪元素
:after
,添加如下样式
clear: both;
content: '';
display: block;
height:0;
visibility: hidden;
2.在浮动元素后增加空标签,并添加clear:both
3.在浮动元素后增加br
标签并使用自身的html属性
<br clear="all">
4.给使用浮动的父元素添加overflow: hidden;
5.给使用浮动的父元素添加overflow: auto;
6.给使用浮动的父元素添加display: table;
7.给使用浮动的父元素添加float: left;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动的方法</title>
<style>
.content {
height: 100px;
width: 50%;
background: skyblue;
}
.left {
float: left;
}
div {
padding: 20px;
}
.side {
width: 20%;
background: lightblue;
}
.warp {
border: 1px solid blue;
width: 300px;
margin: 30px auto 5px;
background: #F5F5F5;
}
.footer {
border: 1px solid #ccc;
background: #999;
width: 300px;
margin: 5px auto 30px;
}
.clear{
clear: both;
}
.close{
/* overflow: hidden; */
/* overflow: auto; */
/* display: table; */
/* float: left; */
}
/* 使用伪元素:after */
.close:after{
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="warp close">
<div class="content left">
内容
</div>
<div class="side left">
侧边栏
</div>
<!-- <br clear="all"> -->
<!-- <div class="clear"></div> -->
</div>
<div class="footer">
底部导航
</div>
</body>
</html>