浮动 

<!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>

 

posted @ 2022-05-11 22:28  氯丙嗪  阅读(15)  评论(0)    收藏  举报