<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.out{
width:300px;
background: palegreen;
border: 2px solid red;
}
.inner{
width: 100px;
height: 100px;
background: skyblue;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
<div>如何清除浮动</div>
</body>
</html>
如果给class="inner"添加浮动,会出现下面的情况
那我们如何解决浮动对其他元素的影响,主要有三种方式:
1.在浮动元素的父元素添加overflow:hidden;
2.在浮动元素的最后添加一个块级标签, 给其设置一个 clear:both 的属性
3.使用伪元素的方法