浮动
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
浮动
使用float来设置元素的浮动，浮动可以使元素向右或向左移动
可选值
none，默认值，不浮动
left向左浮动
right向右浮动
浮动的特点
1.设置浮动以后，元素会向页面的左侧或右侧移动
2.设置浮动以后，元素会完全脱离文档流，不在占据文档流的位置，所有它下面
的元素会自动上移
3.浮动元素不会超过其上没有浮动的块元素
4.浮动元素的默认位置不会超过其上的其他的浮动元素，最多一边齐
元素脱离文档流以后的特点
1.默认宽度被内容撑开
2.默认高度被内容撑开
3.块元素不会独占一行
4.元素不会在文档流中再占据位置
行内元素浮动以后也会脱离文档流，脱离文档流以后行内元素自动变成块元素，特点和
块元素一样
文字不会被浮动元素所覆盖，而是环绕在浮动元素的四周
*/
float: left;
}
/* .box2{
width: 200px;
height: 200px;
background-color: #ff0;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
float: left;
} */
span{
height: 500px;
background-color: #FFFF00;
}
style>
head>
<body>
<div class="box1">div>
<span>老家门前有条河
拐了三道湾儿
又过了五道坎
累了
俯下身子缓缓向西
葡萄着从柳树林中流过
鹅黄的米粒儿探着头
簇拥着在风中舞动
锄儿犁儿伴着吆喝儿
搅动了村中的宁静
墩实的老黄牛踏着
泥土的芬芳
拼了劲儿的前行
猛然扬起的鞭子
惊飞了牛背上正在梳理羽毛的鸟儿
沉淀了一个冬天的力气
在黄土地中尽情的释放
顽皮的孩童儿
放飞着五彩的风筝
偶尔传来的读书声
从山谷里传出老远老远
累了的老农坐在河边的石头上
不停的吸叭着烟袋
一缕青烟融在了头发里
吱儿吱儿种子的发芽声儿
呼儿呼儿苗苗的成长声儿
在眼神里交替打着转
壮实的玉米沉甸的豆
在飘动的水面上
演译成永恒的丰收曲span>
<div class="box2">div>
<div class="box3">div>
body>
html>