重点：
浮动是使元素脱离了文档流并且沿水平方向进行浮动的一种定位方式
使用方式为：
float:left;
注意：脱离文档流之后，浮动的兄弟标签，会随之塌陷，解决这个的方法是给兄弟元素增加浮动或清除浮动。
代码部分：
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: #FF0000;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: lawngreen;
float: left;
}
.box3{
width: 200px;
height: 200px;
background: lightcoral;
float: left;
}
.box4{
width: 200px;
height: 200px;
background: brown;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-
图文混排案例：
实现效果
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.nav{
height: 70px;
padding: 20px;
}
.main{
height: 600px;
width: 600px;;
background: darkgray;
position: relative;
top: 100px;
left: 200px;
}
.p1{
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.p2{
text-align: right;
float: right;
margin-right:20px;
}
img{
width: 200px;
float: left;
}
.concent{
}
.main1{
height:500px ;
}
p{
margin: 0;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<p class="p1">卤関东：小卤味也能创造大市场</p>
<p class="p2">来源：ruanwneyun.cn</p>
</div>
<div class="main1">
<div class="img"><img src="logo321/索隆.jpg"/></div>
<div class="concent"><p>卤味熟食是国人餐桌上必不可少的佳肴，熟食的历史可以追溯到春秋战国时期，比如春秋战国时期的“露鸡”，就是现在烧鸡、卤鸡产品的雏形。熟食卤味分为很多种，有以川卤为代表的：麻辣鸭货、棒棒鸡、夫妻肺片等，也有以北方卤味为代表的：酱香牛肉、熏鸡、扒鸡、红肠等。各个派系的卤味都各有所长，根据每个地区人们的口味不同，卤味熟食也经过一系类的发展，演变成各种各样的特色小吃，不断地进军餐饮市场，成为熟肉制品行业的主流。
中国人善于用食物来缩短他乡与故乡的距离。少的佳肴，熟食的历史可以追溯到春秋战国时期，比如春秋战国时期的“露鸡”，就是现在烧鸡、卤鸡产品的雏形。熟食卤味分为很多种，有以川卤为代表的：麻辣鸭货、棒棒鸡、夫妻肺片等，也有以北方卤味为代表的：酱香牛肉、熏鸡、扒鸡、红肠等。各个派系的卤味都各有所长，根据每个地区人们的口味不同，卤味熟食也经过一系类的发展，演变成各种各样的特色小吃，不断地进军餐饮市场，成为熟肉制品行业的主流。 中国人善于用食物来缩短他乡与故乡的距离。</div>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
