当一些玩意float浮动以后,他们的父级会失去高度,然后父级上你的背景色、背景图什么的都不会出来。你给浮动元素的父级加个边框看看就明白了,我让你百度的:css清理浮动,方法有很多,但目的都是找回父级失去的高度。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px
padding: 0px
}
span{
display: block/*block把span元素定义成块元素*/
width: 100px
/*height: 100px*/
/*text-align: center*/
font-size: 20px
padding: 30px 30px 30px 30px
border: 1px solid #333
}
.left{
background-color: red
}
.right{
background-color: #3498db
}
p{
width: 100px
/*height: 100px*/
background-color: #99db76
padding: 40px
font-size: 20px
}
</style>
</head>
<body>
<span class="left">行内元素1</span>
<span class="right">行内元素2</span>
<p>p标签元素</p>
</body>
</html>