CSS实践09：浮动和溢出

1、美食列表页效果

设置前

设置后

为美食列表添加一张左浮动的图片。

2、实现

在美食列表页添加图片

<img src="images/egg.jpg" alt="西红柿炒鸡蛋">

为图片设置样式

.recipes img{
	width: 150px;
	height: 150px;
	float: left;
	padding: 5px;
	background-color: #FFFFFF;
}

让右边的文字和左侧的图片有一定的距离

.recipes img{
	……
	margin-right: 10px;
}

文字内容超出了盒子的高度，文字环绕了图片，取消文字环绕

.recipes p{
	margin-left: 170px;
}

通过我们希望盒子的高度是固定的，所以通常截断文字。
计算li盒子的高度
图片是150px,有5px的padding，所以图片的高度是160px。
设置li盒子的高度为160px

.recipes li{
	border: 1px solid #b56663; /* 添加边框 */
	padding: 15px; /* 添加补白 */
	margin: 15px 0; /* 添加上下边距 */
	height:160px;
}

p的高度超过了外层盒子的范围，计算p标签的高度（li内容的高度为160px,h3的行高36px，3px的下补白，15px的上下边距，故h3的高度为总69px，所以p的高度为160-69=91px的高度）
设置p标签的高度

.recipes p{
	margin-left: 170px;
	height: 91px;
}

效果上无变化，查看源代码，通过阴影的部分能看出p的高度确实为91px。文字又从p标签溢出了
给p标签设置overflow属性

.recipes p{
	margin-left: 170px;
	height: 91px;
	overflow: hidden;
}