📋 个人简介
上期传送门:
👉css中的选择器
👉css盒子模型及其实战案例(上)
👉css盒子模型及其实战案例(下)
👉css网页布局之浮动及其实战案例(超详细)
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧
👉css三角的做法及其案例
👉css布局技巧-css三角巧妙运用
解释
我们前面讲浮动的时候说道浮动的元素会“飞起来”,不占有位置,会破毁标准流,导致浮动的元素下面的标准流会跑到浮动元素的位置被浮动的元素压住,但是,我们之前在浮动那一节说过,浮动产生的目的就是让文字围绕浮动元素的,即浮动的盒子不会压住文字,利用这个特性可以很好的简化某些布局。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 132px;
background-color: skyblue;
margin: 0 auto;
padding: 5px;
}
.pic{
float: left;
margin-right: 5px;
width:200px;
height: 132px;
}
.pic img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="300.jpg" alt="">
</div>
<p>泰山又名岱山、岱宗,隶属于山东省泰安市[1],是世界自然与文化遗产、国家5A级旅游景区,有“五岳之首”“五岳之长”“天下第一山”之称。
泰山被古人视为“直通帝座”的天堂,成为百姓崇拜,帝王告祭的神山,有“泰山安,四海皆安”的说法。
自秦始皇开始到清代,先后有13代帝王引次亲登泰山封禅或祭祀,另外有24代帝王遣官祭祀72次。
泰山代表景点有阴阳界、桃花峪、傲徕峰、玉皇顶。</p>
</div>
</body>
</html>