我们使用浮动元素,目的就是为了改变元素的标准文档流,使块元素内容能排列成成一行,但是使用之后会发现父级内容撑不起来。
像这样:
效果:
如何处理呢?
直接上代码:四种方式
<!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>
</head>
<style>
.main{
border:5px solid black;
}
.float-child{
float: left;
}
.clear{
clear: both;
}
/*
清除浮动
方法1: 父元素设置overflow:hidden或者overflow:auto;
方法2:父元素设置float(不推荐)
方法3:父元素设置class :after 伪类
.main:after{
content: '';
display: block;
clear: both;
}
方法4:在浮动的子元素同级结尾定义<div class="clear"></div>
*/
</style>
<body>
<div class="main">
<div class="float-child">
我浮动了
</div>
<div class="float-child">
我浮动了
</div>
<div class="clear"></div>
</div>
<div>
正文
</div>
</body>
</html>
我这里用的是上面的最后一种!