实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.浮动原理</title>
<style type="text/css">
.text {
background-color: yellow;
width: 200px;
height: 200px;
float: left;
}
.box1 {
background-color: blue;
width: 200px;
height: 200px;
float: left;
}.box2 {
background-color: coral;
width: 200px;
height: 200px;
float: left;
}.box3 {
background-color: green;
width: 200px;
height: 200px;
float: right;
}
</style>
</head>
<body><!--
浮动与绝对定位
相同之处：元素都脱离了文档流，任何元素浮动之后都变成了块元素，都支持宽高，span特点：浮动总是沿着碎屏方向 -->
<span class="text">PHP中文网</span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
