css中盒子内列表横放之后,给盒子添加背景颜色后,整个盒子并没完全填充颜色,列表没有背景颜色?

html-css013

css中盒子内列表横放之后,给盒子添加背景颜色后,整个盒子并没完全填充颜色,列表没有背景颜色?,第1张

百度:css 清理浮动,看懂并学会处理方法,这是css里经常会遇到的一个玩意。

当一些玩意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>