实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.层级元素之间的清除浮动的技巧</title>
<style type="text/css">
.parent {
background-color: lightskyblue;
border:2px solid red;
/*float: left;*/
overflow: hidden;
}
.parent:after {
/*默认添加的元素是行内元素*/
content: '';
display: block;
clear: both;
}
.child {
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
line-height: 200px;
float: left;
/*
1.让父元素一起浮动，不仅包住了，且包的很严实
2.给父元素添加OVERFLOW:hidden;
3.添加一个多余的空元素来实现
4给父元素添加一个after伪类*/
}
</style>
</head>
<body><!--
浮动与绝对定位
相同之处：元素都脱离了文档流，任何元素浮动之后都变成了块元素，都支持宽高，span特点：浮动总是沿着碎屏方向 -->
<div class="parent">
<div class="child">子元素</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
